useParams를 통한 라우팅

react-router-dom에서는 useParams라는 훅을 기본적으로 제공한다. 

useParams는 기본적으로 query string의 매개변수를 값으로 받아오는 훅이다. 쉽게 말하면 

https://api.themoviedb.org/3/movie/12321?api_key=<>&language=en-US

이러한 api키가 있다고 가정했을 때 movie뒤에 위치한 12321을 값으로 사용할 수 있게 만들어주는 훅이다.

 

실사용에서는 어떻게 사용되는 지 살펴보면 

 

우리는 페이지를 만들고 라우팅 할 때 예를 들어 쇼핑몰사이트나 ott사이트에서 각 상품이나 각 영화에 관한 상세페이지를 만들고 싶다고 하자 

 

그럴 때 각 상세페이지를 상품마다, 혹은 영화마다 다 만든다면 프론트 개발자들은 다 죽어나갈 것이다. 

 

이러한 문제를 해결하기 위해서 대부분 이와 같은 상세페이지는 기본적인 레이아웃등을 잡아두고 각 상품에 관한 정보는 api query에서 각 상품이나 영화의 고유한 id값을 서버에게 전달해 정보를 받아오는 형식으로 설계하게 된다. 

 

이 때 우리는 각 정보를 받아와야하므로 각 제품이나 영화에 대한 api query를 다르게 설정해줄 필요가 있고 이때 사용하게 되는 hook이  useParams라는 훅이다. 

 

나는 우선 상위 페이지 즉 main페이지에서 영화를 선택하면 해당하는 영화의 상세페이지로 이동하는 routing을 하고 싶다. 

그럴 때 mainpage에서는 Link 태그를 이용하여 어디로 이동할 지를 정해준다. 또한 ${}안에 들어가거나 : 표시 뒤에 선언되는 변수는 우리가 useParams훅을 통하여 받아올 수 있는 변수가 된다. 

 

카드 컴포넌트를 살펴보면 가장 위에 Link태그로 감싸져 있는 것을 확인할 수 있고 그 Link의 to 속성으로 주어진 것은 linkUrl이라는 속성인 것을 확인할 수 있다. main page에서는 이 컴포넌트를 이용해 라우팅을 하게 된다. 이제 상세페이지를 받아오는 feature를 담당하는 부분에서는 

 

이와 같이 useParams를 사용하여 Link태그에 설정된 파라미터를 받아온 후 이 파라미터를 api를 호출하여 상세 정보를 받아오는 커스톰 훅에 전달할 수 있다. 이렇게 되면 각 영화나 상품에 대한 페이지를 하나하나 설정하는 것이 아니라 파라미터만 다르게 전달하여 api호출을 다르게 함으로써 같은 레이아웃안에서 다른 정보를 전달할 수 있는 페이지를 만들 수 있는 것이다.