페이지 라우팅 시 상태 전달 방식 변경

기존에는 페이지를 이동할 때에 State 객체를 통해 상품의 상태를 다음 컴포넌트로 넘겨주는 방식을 사용했다. 하지만 이 경우 브라우저 히스토리에 저장되지 않고 사용자가 해당 상품의 링크 공유를 하기가 어려울 것이라는 생각을 하게 되었다.

따라서 기존 웹사이트를 참고한 결과, 이를 URL 파라미터(쿼리 스트링) 방식으로 변경하기로 했다.

또한 이렇게 변경하는 것에는 다음과 같은 장점이 있다.

1. URL에 제품 ID가 포함되므로 사용자가 현재 페이지의 정보에 대해 잘 알 수 있다.
2. 사용자가 특정 상품 페이지를 공유할 수 있다.
3. 상태를 URL에 포함시킴으로써 컴포넌트 간의 의존성을 줄일 수 있다.
4. URL에 제품 ID가 포함되면 검색 엔진이 해당 페이지를 색인화하기 좋다.
5. 브라우저 내장 기능을 활용하여 뒤로 가기 및 앞으로 가기 작업이 쉬워진다.

State 객체를 통한 데이터 전달

// components/products.tsx
<div onClick={() => navigate("/product", { state: product })}>
  // ...
</div>

// routes/public/product.tsx
const { state }: DocumentData = useLocation();
const product = state as ProductType;

상품 목록 컴포넌트에서 react-router-dom의 useNavigate 훅의 navigate 함수를 사용해서 해당 상품 클릭시 해당 상품 페이지(/product)로 이동한다. 이때 state에 상품 정보를 같이 보내주면 product 페이지에서 해당 상품 정보를 받을 수 있다.

URL 파라미터를 통한 데이터 전달

// components/products.tsx
<div onClick={() => navigate({ pathname: "/product", search: `?id=${product.id}` })}>

// routes/public/product.tsx
const [searchParams] = useSearchParams();
const productId = searchParams.get("id");

// id와 일치하는 상품 정보 가져오기
useEffect(() => {
  if (productId) {
    getProductInfo(productId);
  }
}, []);

상품을 클릭했을 때 쿼리 파라미터를 사용하여 상품 id가 포함된 URL로 이동한다. 그리고 이동한 해당 상품 페이지에서 react-router-dom의 useSeaerchParams를 통해 해당 파라미터 값을 가져오는 방식으로 변경하였다.