[React] useParam

React Router는 React 기반의 라우팅 라이브러리로, SPA(Single Page Application)에서 URL 경로를 기반으로 컴포넌트를 렌더링하고, 상태를 관리하는 기능을 제공한다. React Router의 useParam 훅은, URL 경로에 포함된 동적 파라미터를 가져와서 사용할 수 있게 해주는 훅이다.

useParam 훅은 useParams 훅과 함께 사용된다. useParams는 URL 경로에서 파라미터 값을 객체로 반환하는 훅이고, useParam은 URL 경로에서 특정 파라미터 값을 가져오는 훅이다.

예를 들어, 다음과 같은 URL 경로가 있다고 가정해보자.

/posts/:postId

위 경로에서 postId는 동적 파라미터로, postId 값에 따라 렌더링되는 컴포넌트가 달라진다. 이때 useParam을 사용하여 postId 값을 가져올 수 있다.

import { useParams } from 'react-router-dom';

function Post() {
  const { postId } = useParams();

  // postId 값을 이용하여 해당하는 포스트 정보를 가져온다.

  return (
    <div>
      <h1>포스트 {postId} 내용</h1>
      {/* 내용을 렌더링 */}
    </div>
  );
}

위 코드에서 useParams 훅으로 postId 값을 가져와서 컴포넌트 내에서 사용할 수 있다. 이렇게 가져온 값을 이용하여 포스트 정보를 렌더링하거나, 상태를 관리할 수 있다.

useParam 훅은 URL 경로에서 가져온 동적 파라미터를 사용하여 컴포넌트 내에서 다양한 작업을 수행할 수 있다.