[Router] useParams 사용하기

오늘은 useParams 사용하는 법에 대해 알아보겠습니다. 

 

 

[ useParams란? ]

 

useParams이란 react-router-dom에서 제공하는 Hooks 중 하나로 Parameter(파라미터) 값을 URL을 통해서 넘겨받은 페이지에서 사용할 수 있도록 해주는 것을 말합니다. 

 

예를 들어, 특정 제품 리스트에서 제품을 클릭 시 제품의 세부 정보를 나타내는 페이지로 이동하고 싶다면 제품의 id 값을 URL로 넘겨 세부 페이지에서 id 값에 해당하는 제품만 보여줄 수 있습니다.

 

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams를 사용하면 됩니다.

 

createBrowserRouter를 통해 다음과 같이 코드를 작성한다고 가정했을 때, ProductDetailPage로 이동하기 위해서는 해당 경로가 products/:productId와 같은 경로로 이동해야 합니다.

 

여기서 : (콜론)을 통해 뒤에 오는 페이지를 동적으로 구현할 수 있습니다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <HomePage /> },
      { path: "products", element: <ProductsPage /> },
      { path: "products/:productId", element: <ProductDetailPage /> },
      // product/: <- 콜론을 통해 뒤에 오는 페이지를 동적으로 구현함
    ],
  },
]);

 

 

import { Link } from "react-router-dom";
 
const PRODUCTS = [
    {id: 'p1', title: 'Product 1'},
    {id: 'p2', title: 'Product 2'},
    {id: 'p3', title: 'Product 3'},
];
 
function ProductsPage() {
    return (
        <>
        <h1>The Products Page</h1>   
        <ul>
           {PRODUCTS.map( prod => (
            <li key={prod.id}><Link to={`/products/${prod.id}`}>{prod.title}</Link></li>
           ))}
        </ul>
        </>
    );
}
 
export default ProductsPage;

 

Products라는 페이지에서 제품에 대한 기본 정보가 나열되어 있고 해당 정보를 클릭 시 제품에 대한 상세 페이지를 나타내게 할 수 있습니다.

 

 

import { useParams } from "react-router-dom";
 
function ProductDetailPage() {
    const params = useParams();
// useParams() : 라우트 정의에서 프로퍼티로 정의한 모든 역동적 경로 세그먼트가 담긴 간단한 JavaScript 객체이다.
 
    return (
        <>
       <h1>Product Details</h1>
       <p>{params.productId}</p>
        </>
        );
}
 
export default ProductDetailPage

 

  

ProductDetailPage에서는 useParams을 통해 URL로 받은 id를 출력합니다.

 

 

 

 

Product1, Product2, Product3 중 하나를 클릭 

 

 

해당 URL로 이동 

 

 

useParams을 통해 p1 출력