[Router] useParams 사용하기

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

예를 들어, 특정 제품 리스트에서 제품을 클릭 시 제품의 세부 정보를 나타내는 페이지로 이동하고 싶다면 제품의 id 값을 URL로 넘겨 세부 페이지에서 id 값에 해당하는 제품만 보여줄 수 있습니다. 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams를 사용하면 됩니다. createBrowserRouter를 통해 다음과 같이 코드를 작성한다고 가정했을 때, ProductDetailPage로 .....