[React] usePrams() 사용법

usePrams는 url의 파라미터의 값을 가져올 수 있는 라우터 hook

 

예를 상품 페이지를 랜더링 할 때 사용할 수 있다

 

pruduct/3이라는 url 주소가 있다

 

usePrams 사용법을 알아보자

 

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

먼저 useParams를 import 해온다

 

const params = useParams();

변수에 useParams를 담는다 

 

 

Route.js

<Route path="/product/:id" element={<ProductDesc />} />

product/에 :id 주소를 params로 가져올 수 있다

 

 

이제 URL 주소에 따라 페이지를 동적으로 보여주고 싶다고 하면

URL을 받는 코드에 템플릿 리터럴을 사용하여 보여주면 된다