2024. 02. 05 상세페이지 구현해보기

1. Router 설정

 

상세페이지는 동적으로 표현하기 위해 router를 이용해 동적 경로를 이용

import { Navigate, RouterProvider, createBrowserRouter } from "react-router-dom";
import Home from "./components/pages/Home";
import Error from "./components/pages/Error";
import Detail from "./components/pages/Detail";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <Error />,
  },
  {
    path: "/:detail/:id",
    element: <Detail />,
  },
  {
    path: "*",
    element: <Navigate to="/" replace />,
  },
]);

function App() {
	return <RouterProvider router={router}/>
}

export default App;

 

💡 경로설정에 따른 차이

❓ 고정경로 ( path : " /detail " )
url이 정확히 /detail로 일치할 때만 해당 라우터가 활성화 된다.
즉, 하나의 구체적인 경로로, 특정 기능이나 페이지에 대한 정확한 경로를 나타낸다.


❓ 동적경로 ( path : " /:detail " )
URL의 해당 부분이 변할 수 있고, 변하는 부분을 경로 매개변수(parameter)로 추출할 수 있다.
예를 들어 /1, /2, /3 등과 같이 다양한 Id에 대한 구조의 페이지를 보여줄 수 있다.

 

---

2. id 받아오기

id 중에서 선택된 아이디가 무엇인지 비교가 필요하기 때문에,

선택된 값을 가지고 있는 컴포넌트에서 id를 가져와야 한다. 

 

  return (
    <li>
      <div className={styles.List}>
        <p className={styles.title}>{todo.title}</p>
        <p>{todo.content}</p>
        <p className={styles.Date}>{todo.date}</p>
        <p className={styles.GapDay}>{gapday()}</p>
      </div>
      <div className={styles.Buttons}>
        <Link to={`/:detail/${todo.id}`}>
          <button className={styles.DetailButton}>상세보기</button>
        </Link>
        <button className={styles.IconButton} onClick={handleIsDone}>
          <IoIosCloudDone className={styles.Icon} />
        </button>
        <button className={styles.IconButton} onClick={handleDelete}>
          <FaTrashAlt className={styles.Icon} />
        </button>
      </div>
    </li>
  );

 

위 코드는 UI에서 객체의 값을 담고 있는 컴포넌트이다.

 

id 전달하기

        <Link to={`/:detail/${todo.id}`}>
          <button className={styles.DetailButton}>상세보기</button>
        </Link>

 

<Link/> 를 통해 이동되어야 하는 페이지와 id값을 전달

 

 

id 받기

  import { useParams } from "react-router-dom";
  
  export default function DetailPage() {
  
  const { todos } = useContext(TodoContext);
  const { id } = useParams();
  const todo = todos.find((todo) => todo.id === id);

 

이동된 페이지 컴포넌트에서 useParams를 통해 id 받기

 

---

 

3. 만들어둔 component, import 해서 사용하기!

 

import DetailPage from "../detailItem/DetailPage";
import styles from "./Detail.module.css";

export default function Detail() {
  return (
    <div className={styles.DetailBox}>
      <DetailPage />
    </div>
  );
}

 

만들어둔 DetailPage 컴포넌트 만들어서 사용해 주면 끝!!