useNavigate을 쓰는 이유는...

Taehee Kim·2022년 8월 29일

React

목록 보기

7/7

✍ useNavigate 쓰게 된 이유

개발자굿즈샵 개인 프로젝트를 진행하면서 페이지 이동할 때 어떤 hook을 사용해야 하는지 많은 고민이 됐었다. 202상태일 때 페이지를 넘겨라! 이렇게 조건부를 붙여 페이지를 넘길 때 주로 사용하는 hook을 찾아보니useNavigate가 있었고, Link to 외에 다른 방법이 없는 것 같아 useNavigate를 사용하기로 결정했다.

useNavigate 사용 예시

//로그인 성공하면 productListpage로 이동
const navigate = useNavigate();
const successLogin = () => {
  navigate("/");
};

✨ 페이지 간 자유롭게 Props를 넘겨주기

그런데 말입니다.. 사실 왜 useNavigate hook을 사용하는 게 좋은지 잘 알지 못했다. 그냥 Link to는 a태그의 대체역할 뿐이니 그러한 한계점을 보완해주는 react-router-dom hook이라고 생각했다.

그런데 오픈마켓을 만들면서 useNavigate를 사용하는 페이지 간에 props를 자유롭게 전달해주기 위함임을 알게 되었다.

내가 상품 디테일 페이지에서 결제하기 버튼을 누르면 주문 정보 입력하는 페이지로 넘길 때 수량, 가격, id등 상품 정보를 넘겨줘야 했는데, 열심히 구글링을 한 결과 useNavigate에 path외에 state를 객체로 형태로 키와 value 값을 정해주면 된다.

🔗 상품디테일 page

1. useNavigate로 path값과 props 값을 주문 정보 페이지로 전달해준다.

const nav = useNavigate();
const cookie = getCookie("refreshToken");
const GoPaymentPage = () => {
  if (cookie) {
      nav("/payment", {
        state: {
          productId: productId,
          orderNum: orderNum,
          price: price,
          image: image,
          productName: productName,
          productInfo: productInfo,
          shippingFee: shippingFee,
          shippingMethod: shippingMethod,
      },
    });
  } else if (!cookie) {
    alert("로그인이 필요합니다. 😥");
  }
};

🔗 주문정보 page

2. useLocation을 사용하여 state 값 받아와서 사용하기

const location = useLocation();
  const productId = location.state.productId; 
  const orderNum = location.state.orderNum;
  const price = location.state.price;
  const shippingFee = location.state.shippingFee;
  const totalPrice = parseInt(orderNum * price + shippingFee);