[React] useNavigate, useLocation으로 여러 페이지에서 넘어오는 다른 값들 한 페이지에서 관리하기

useLocation, useNavigate를 이용하면 다른 페이지로 이동할 때 값을 넘길 수 있다.
예를 들면, 장바구니 페이지에서 주문 페이지로 이동할 때 선택한 item들의 값을 넘겨주고 싶을 것이다. 그럼 주문 페이지로 이동하는 버튼에 다음과 같은 코드를 작성해 넘겨주면 된다.
navigate('/이동할 페이지',{state: 넘기고 싶은 데이터})

//src/pages/Cart/Cart.jsx
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const orderHandler = () => {
    navigate('/order', { state: checkedItems });
    }
    
    ...
    
//src/pages/Order/Order.jsx
import { useLocation } from 'react-router-dom';

const cartItemIds = location.state;

주문 페이지에서는 location.state를 통해 값을 가져와서 사용할 수 있다.

그런데 문제가 생겼다.
상품을 주문할 때 두 가지 경우가 있었던 것이다.
1. 장바구니 페이지에서 아이템을 선택해 주문하기.
2. 제품 페이지에서 '바로 구매' 버튼을 통해 주문하기.
장바구니 페이지와 제품 페이지에서 넘겨주는 값의 형태가 다른데, 주문은 주문 페이지 한 곳에서 이루어진다. 각기 다른 데이터를 주문 페이지로 가져와서 상품을 렌더링해주어야 했다.

이럴 땐 type을 설정하여 데이터를 구분할 수 있다. state안에 type을 설정하고 넘겨줄 데이터를 담으면 된다.

//src/pages/Cart/Cart.jsx
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const orderHandler = () => {
    navigate('/order', { state: { type: 'cart', items: checkedItems } });
  };

... 

//src/pages/Product/Product.jsx
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const orderHandler = () => {
    navigate('/order', { state: { type: 'product', product } });
  };

...
//src/pages/Order/Order.jsx
import { useLocation } from 'react-router-dom';

const state = location.state;
   
useEffect(() => {
    async function fetchOrderItems() {
      if (state.type === 'product') {
      // 코드
      } else if (state.type === 'cart') {
        const cartItemIds = state.items;
       // 코드
    }
    fetchOrderItems();
  }, [cartItems, state]);
  

const state = location.state으로 두 페이지에서 넘어온 모든 값을 가져오고, type으로 구분한 각 데이터를 필요에 따라 수정해 주문 상품을 렌더링 해주었다!