이전 프로젝트에서는 서버에서 받아오는 id값을 얻고 해당 id값을 토대로 서버에 데이터 요청을 보내고 다시 받아와 페이지에 넘겨주고 컴포넌트에서 데이터를 처리하였는데 이러한 방법대신 데이터를 한번 받아오고, 해당 데이터의 id를 url의 parameter로 지정하여 데이터를 페이지에 넘기는방식으로도 사용할 수 있다는것을 알게되었다.

useParams

react-router-dom의 useParams hook을 사용해서 컴포넌트에서 전달 받는 URL Parameter를 사용해서 적용해볼 수 있도록한다. 즉, URL 경로에 매개변수를 도입할 수 있게 되는 것이다.

Body.js

<Routes>
  <Route path="/" element={<Main />} />
  <Route path="/detail" element={<Detail />} />
</Routes>

위의 방식처럼 정해진 경우에서만 라우팅을 했던것이다. 하지만 다른 쇼핑몰이나 사이트를 보면 url의 뒤에 id값이 들어가는것을 확인할 수 있다.(https://www.test.com/product/13133과 같이..) 이것은 일일히 작성해줄 수 있는 정보가 아닌것이다.

useParams는 URL 인자들의 key/value(키/값)짝들의 객체를 반환하게 된다. <Route>의 match.params에 접근하기 위해 사용된다.

Body.js

import React, { useState } from "react";
import { Routes, Route, BrowserRouter as Router } from "react-router-dom";
import DetailPage from "../../Pages/DetailPage/DetailPage";

const Body = () => {

  return (
    <BodySection>
      <Routes>
        <Router>
          <Route path="/" element={<Main />} />
          <Route path="/detail/:id" element={<DetailPage/>}/>
        </Router>
	  </Routes>
    </BodySection>
  );
};

export default Body;

위의 코드처럼 데이터들이 나열되어있는 리스트페이지에서 링크 값에 넘겨줄 id정보를 담아주게 된다.

만약 아래와 같은 dummy데이터가 넘어간다고 해보자.

dummy.js

const testInfo = [
  {
    id: 0,
    image: icon,
    title: "안녕?",
    admin: "Admin Corp.",
    content: "오늘은 뭘 먹을까",
  },
  {
    id: 1,
    image: icon2,
    admin: "Google Corp.",
    title: "Chrome",
    content: "올바른 브라우저를 이끄는 가장 밝은 빛 크롬. 크롬은 언제나 여러분과 함께합니다.",
  },
];

파라미터로 넘겨지는 id값에 따라 원하는 데이터를 불러올 수 있다. 불러올 때 useParams를 이용해서 id값을 가져오고 그 데이터 값을 이용해서 세부페이지에서 활용하는 구조로 만들면 되는 것이다. 여기서 id는 객체의 key값으로 꺼내 사용할 수 있다.

import { useParams } from "react-router-dom";
import { Context } from "../context/context";

export default function DetailPage() {
  const {id} = useParams(); // 클릭한 컴포넌트의 id값을 받아옴.
  const context = useContext(Context);

  return (
    <section>
      <h1>{context.data[id].title}</h1>
      <p>{context.data[id].content}</p>
    </section>
  )
}

Referene

리액트 라우터 API 문서 (useParams)
동적 라우팅 - Path Parameter 와 useParams