동적 라우팅을 알기전에 우선 정적 라우팅이 무엇인지 부터 알 필요가 있다.
정적 라우팅
정적 라우팅은 경로와 컴포넌트 하나하나를 정해줘야 한다.
만약 전체 상품 페이지에서 상세 상품 페이지로 이동할 때 상세페이지의 경로를 다 정해줘야 한다.
그럼 상품이 1억개면 상품 상세 페이지 경로 1억개를 만들어야 한다.
이는 매우 비효율적인 라우팅 방식이다.
그렇다면 이러한 비효율적인 방식은 어떻게 보완할 수 있을까?
그것이 바로 이번 글에서 소개할 동적 라우팅이다.
<Route path="/detail/1" element={<Monster />} />
~
<Route path="/detail/100000" element={<Monster />} />동적 라우팅
동적 라우팅은 절대 경로를 지정하는 것이 아니라 경로에 path parameter를 줘서 동적으로 상세페이지에 들어갈 수 있다. 슬래쉬/ 뒤에 콜론: 과 path parameter를 넣어준다. (경로/:문자열)
매개변수기 때문에 아무값을 넣어줘도 된다.
<Route path="/detail/:id" element={<Monster />} />그렇다면 어떻게 path parameter 를 사용할 수 있을까?
useParams hook 을 이용해서 path parameter 값을 가져올 수 있다.
useParams hook
useParams hook은 react-router-dom에서 제공해서 react-router-dom에서 Import해줘야 한다.
useParams안에는 객체형태({매개변수:숫자})로 해당 상세페이지 값이 전달된다.
import { useParams } from 'react-router-dom';
const params = useParams();마치며
이번 프로젝트를 진행하면서 장바구니 기능을 맡았는데 상품의 상세페이지로 이동하는 기능이 있었다. 어떻게 각 상품마다의 상세페이지로 이동할 수 있을까 고민하였고, 동적 라우팅을 공부하면서 path parameter와 useParams hook을 이용해 쉽게 구현할 수 있게되었다.
지금까지는 페이지가 몇개 안되었지만, 프로젝트를 진행하면서 수많은 페이지를 관리 하는데 있어서 꼭 필요한 개념이었다.
