리액트 25강

페이지마다 URL을 지정

import { useState, useEffect } from "react";
import Item from "./Item"; 

export default function items( {endpoint=""} ) { //endpoint를 이용하여 버튼에 따라 페이지 변경
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [data, setData] = useState([]);

    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(()=>{
        fetch(`http://localhost:3001/items${endpoint}`).then((res)=>{
            return res.json() 
        })
        .then((json_response) => { 
            setData(json_response);
        });
    });


    return (
    <table>
        <td></td>
        <td>Task</td>
        <td>Due</td>
        <td></td>
        {data.map( 
            (item)=>{ 
                return <Item key={item.id} item={item}/> //함수에서 유일하게 리턴하는 컴포넌트들의 id를 key로
            }
        )}
    </table>
    );
}

import { Link } from "react-router-dom"; //각 페이지로 이동할수 있도록 링크를 넣어주는 애

export default function Header(){
    return(<div className="header">
        <h1>
            <Link to="/">todo-list</Link>
        </h1>
        <div className="menu">
            <Link to="/todo" className="link">
                <button>Todo</button>
            </Link>
            <Link to="/done" className="link">
                <button>Done</button>
            </Link>
            <Link to="/create_item" className="link">
                <button>Add</button>
            </Link>
        </div>
    </div>)
}

import React from "react";
import Items from "./components/Items";
import Header from "./components/Header";
import CreateItem from "./components/Createitem";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Header/>
                <Routes>
                    <Route path="/" element={<Items/>}/>
                    <Route path="/todo" element={<Items endpoint="?status=todo"/>}/> //todo목록만 보게
                    <Route path="/done" element={<Items endpoint="?status=done"/>}/> //done목록만 보게
                    <Route path="/create_item" element={<CreateItem/>}/>
                </Routes>
            </div>
        </BrowserRouter>
    );
}

export default App;