useParams 로 세부 페이지 라우팅 구현하기

useParams 란?

react-router에서 제공하는 Hooks 중 하나로 React 16.8 버전 이상에서만 구동이 가능하다. Parameter(파라미터) 값을 URL을 통해서 넘겨서 넘겨받은 페이지에서 사용할 수 있도록 도와준다.

예를 들어, 여러 개의 영화 정보가 담겨있는 데이터를 출력해준다고 가정할 때, 영화 제목을 클릭해서 세부 페이지로 이동을 하도록 구현한다면, 영화의 id 값을 URL로 넘겨 세부 페이지에 id 값에 해당하는 영화 정보만 출력하도록 만들 수 있도록 도와준다.

useParams 문법

useParams를 사용하기 위해서는 먼저, react-router-dom을 설치해야한다.

npm install react-router-dom

먼저, 라우팅을 구현할 페이지들을 생성한 뒤에 디테일 페이지의 path에 :id 값을 넣어준다. 여기에서 id는 객체의 key 값으로 개발자의 편의에 따라 다른 명칭으로 만들 수 있다. 

// App.jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import Home from './routes/Home';
import Detail from './routes/Detail';
import Context from './context/context';

function App() {
  return (
    <Context>
      <Router>
        <Routes>
          <Route path="/" exact element={<Home />} />
          <Route path="/detail/:id" element={<Detail />} />
        </Routes>
      </Router>
    </Context>
  );
}

export default App;

그리고 데이터들이 나열되어 있는 리스트 페이지에서 링크 값에 넘겨줄 id 정보를 담아준다. 이 정보는 객체의 value 값으로 파라미터로 넘겨지는 데이터는 key와 value 값을 가진 객체 형태로 넘겨진다는 것을 알 수 있다.

// List.jsx

import { useEffect, useContext, useState } from 'react';
import { Link } from "react-router-dom";
import { Context } from '../context/context';

export default function Home() {
  const context = useContext(Context);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('../data.json')
    .then(res => res.json())
    .then(res => {
      context.data = res.data;
      setData(res.data);
    })
  }, [])

  return (
    <section>
      {data.map(item => (
        <Link to={`/detail/${item.id}`} key={item.id}>
          <h2>{item.title}</h2>
        </Link>
      ))}
    </section>
  )
}

이렇게 구성해준 뒤 리스트 중 하나를 클릭하게 되면 id 값을 파라미터로 가지고 라우팅이 이루어진다. 아래의 URL을 보면 객체의 value 값을 넘겨준 것을 알 수 있다.

아래 예시와 같은 데이터가 있고, 이것을 불러온다고 가정해보자.

// data.json

{
  "data": [
    {
      "id": 0,
      "title": "HTML",
      "description": "HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript)."
    },
    {
      "id": 1,
      "title": "CSS",
      "description": "Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media."
    },
    {
      "id": 2,
      "title": "JavaScript",
      "description": "JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat."
    }
  ]
}

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

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

export default function Detail() {
  const {id} = useParams();
  const context = useContext(Context);

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