프로젝트를 하던 도중 상품목록 페이지를 만들던 팀원이 질문을 했다.
'그런데, 이 컴포넌트 하나로 어떻게 각각의 상세페이지를 보여주고 이동할 수 있어요?'
처음에 생각했던 방법은 이것이었다.
각 카테고리별로 라우터를 설정한 다음 해당하는 컴포넌트에 각각의 데이터를 prop로 전달하는 것.
그런데 문제가 있었다.
각각 페이지 별로 라우팅을 해주어야 해 확장성이 없다는 것과, router를 담당하는 js파일에서 관련 데이터를 받아와 전달해주어야 한다는 것.
다른 어떤 방법이 있을까 하고 찾아보니, 동적 라우팅이라는 방법이 있었다.
동적 라우팅
라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것
어떻게 특정 값을 넣는다는 걸까?
Path Parameter
url 경로에서 달라지는 부분을 저장하는 매개변수
localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125라우트에 /:param을 사용해주면 되는데,
/: 다음에 임의의 이름을 지정해주는 것이다.
프로젝트에서는 상품 상세페이지를 동적라우팅해야 했기 때문에, 다음과 같이 라우트를 설정했다.
<BrowserRouter>
<Routes>
<Route path="/products/:id" element={<ProductDetail />} />
</Routes>
</BrowserRouter>useNavigate
클릭한 상품의 id를 이용해 설정한 라우트 경로로 이동해주도록 한다.
const navigate = useNavigate();
function onClickProduct(productId) {
navigate(`/products/${productId}`)fetchData - useParams
그리고, 해당하는 경로로 이동했을 때 /:id에 해당하는 데이터를 받아올 수 있도록 쿼리 스트링을 작성한다.
const params = useParams();
useEffect(() => {
fetch(`http://13.209.117.55/products/${params.id}`)
.then(res => res.json())
.then(res => setProductDetail(res.product_detail));
}, []);useLocation
useLocation은 경로 정보를 담고 있는 객체를 반환한다.
{
pathname: '/product/1',
search: '',
hash: '',
state: null,
key: 'default'
}여기서 pathname은 현재의 경로 값을, search는 현재 경로의 query parameter값을 갖고 있다.
동적라우팅을 위해서는 useParams를 사용하지만, 페이지네이션을 위해서는 search값을 가져와 해당하는 쿼리스트링 값을 이용해 데이터를 요청할 수 있다.
Reference
