[React] useParams Hook의 사용법

1) useParams Hook 이란 ?

The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the <Route path>. Child routes inherit all params from their parent routes.
useParams Hook은 <Route path>와 일치하는 현재 URL에서 동적 매개변수의 key/value 쌍 객체를 반환합니다. 하위 경로는 상위 경로에서 모든 매개변수를 상속합니다. (출처 : React Router 공식 문서)

 

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 React Router에서 제공하는 useParams라는 훅을 사용하면 됩니다. 라우터를 사용하고 있다는 가정 하에 useParams 사용 방법에 대해 알아보도록 하겠습니다.

 

useParams는 리액트에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용하는데, URL에 포함되어있는 Key/Value 형식의 객체를 반환해주는 역할을 합니다. 

 

Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면, useParams를 통해 Key, Value 객체를 반환받아 확인할 수 있습니다. 반환받은 Value를 통해 게시글을 불러오거나, 검색목록을 변경시키는 등 다양한 기능으로 확장시켜 사용할 수 있습니다.

 

2) useParams 사용법

npm install react-router-dom

useParams를 사용하기 위해서는 React Router를 먼저 설치하고 import 시켜주어야 합니다.

 

3) 실습

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

<Route> 컴포넌트의 props로 전해주는 path에서 파라미터 값을 ': something' 으로 전해주면, useParams Hook은 something이라는 key값과 현재 url의 파라미터를 가진 객체를 반환하게 됩니다.

 

<h2>
  <Link to={`/movie/${id}`}>{title}</Link>
</h2>

위와 같이 <Link> 태그의 to props에 자바스크립트를 사용하여 동적으로 라우팅이 가능합니다. url 파라미터 값에서 주어진 값을 useParams를 사용하여 key/value 쌍의 객체를 얻어 활용할 수 있는 것입니다.

 

이상으로 React Router에서 제공하는 Hook 중에 하나인 useParams에 대한 내용을 마치겠습니다.