[TIL] 240206(화) To-do List 상세페이지 만들기

요구 사항

라우팅 설정
- React Router를 사용하여 투두 리스트 페이지와 투두 아이템 상세 페이지 간의 라우팅을 구현합니다.
- URL 경로는 / 로 투두 리스트 페이지를, /:todoId 로 각 투두 아이템의 상세 페이지를 나타냅니다.

상세 페이지 구현
- 투두 아이템의 상세 정보(예: 제목, 설명, 완료 여부 등)를 표시합니다.
- 상세 페이지는 투두 아이템의 ID를 기반으로 해당 아이템의 정보를 찾아 표시합니다.

---

1. page와 Router 설정하기

1) HomePage 와 DetailPage를 구분한다.

/* Home 페이지 */
function Home() {
  return (
    <>
      <StDiv>
        <TodoHeader />
        <TodoController />
      </StDiv>
    </>
  );
}

▶️ 기존의 Header와 TodoController를 Home 페이지 하위로 넣어준다.

2) Router 설정

const { default: DetailPage } = require("pages/DetailPage");
const { default: Home } = require("pages/Home");
const { BrowserRouter, Routes, Route, Navigate } = require("react-router-dom");

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/detail/:id" element={<DetailPage />} />
        <Route path="*" element={<Navigate replace to="/" />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

▶️ <BrowserRouter> > <Routes> > <Route> 순으로 연결한다.

🚨 <Route>에는 각각 path와 element를 연결해준다. 

▶️ DetailPage로 연결할 때는, path parameter 혹은 params를 /: 뒤에 붙여준다!

🚨  <Route path="*" element={<Navigate replace to="/" />} />

▶️ path="*"으로 설정하면, / 뒤에 없는 숫자가 왔다는 의미이고, 그때 Navigate를 이용하여 / 뒤의 값을 "/" 로 replace하여 HOME으로 돌아가도록 설정한다.

3) useParams() 로 id 값을 넘겨받는다.

const { id } = useParams();

▶️ 구조분해할당을 이용하여 id 값을 바로 가져온다.

이때 id를 console.log를 찍어보면, /detail/: 뒤에 붙는 id와 동일한 값이 나오는 것을 확인 할 수 있다.

2. useContext로 전역상태 관리하기

DetailPage에서 cards를 사용하려고 하니, props를 내려받을 수 있는 경로가 없어서, useContext를 활용하여 데이터를 전역상태로 관리하기로 했다.