[React - 10] useParams

useParams는 React Router의 훅 중 하나로, 현재 경로의 URL 매개변수를 가져올 수 있게 해줍니다.

URL 매개변수는 동적 라우트 경로에서 : (콜론) 문자로 시작하는 부분입니다.

이 훅은 동적 라우트를 사용하는 컴포넌트에서 URL의 변수 부분에 액세스하려 할 때 유용합니다.

 

1. 동적 경로를 설정합니다.

<Route path="/user/:userId" element={<User />} />
// :userId는 동적 URL 매개변수입니다.

2.useParams()를 사용하여 해당 매개변수에 액세스합니다.

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

function User() {
  // useParams 훅을 사용하여 URL 매개변수에 액세스합니다.
  // useParams는 현재 경로의 모든 동적 매개변수를 객체 형태로 반환합니다.
  const { userId } = useParams();
  // 구조 분해 할당을 이용하여 바로 값을 넣습니다.

  return <div>User ID: {userId}</div>;
}

예를 들어, "/user/123"로 접근하면, 위의 User 컴포넌트는 "User ID: 123"을 표시하게 됩니다.