useNavigate()로 데이터 전달하기

💡useNavigate() 제대로 사용하기

useNavigate를 경로 이동 시에만 사용했던 과거의 나..🥲
물론 잘못된 것은 아니지만 useNavigate를 데이터를 전달하는 목적으로도 사용하여 조금 더 효율적으로 코드를 작성할 수 있다는 사실을 배웠다.

• useNavigate()를 기존에 사용했던 방식(예시)

  // 상품 카드 컴포넌트 파일
  import { useNavigate } from "react-router-dom";
  
  const navigate = useNavigate();
  
  // 경로 이동에 초점이 맞춰진 useNavigate() 사용
  const handleClick = () => navigate(`/products/${id}`)

  // 상세페이지 파일
  import { useParams } from "react-router-dom";
  
  // 상품의 id를 가져옴
  const { id } = useParams()
  
  // id를 통해 fetch를 이용해 상품 정보를 획득하는 방식으로 구현

• useNavigate()로 데이터 전달하는 방식(예시)

  // 상품 카드 컴포넌트 파일
  import { useNavigate } from "react-router-dom";
  
  const navigate = useNavigate();
  
  // 두 번쨰 인자에 state 속성을 추가해 경로 이동 시 데이터 전달 가능
  const handleClick = () => navigate(`/products/${id}`, { state: {product} })

  // 상세페이지 파일
  import { useLocation } from "react-router-dom";
  
  const {
    state: {
      product: { id, image, title },
    },
  } = useLocation();
  
  // useLocaiton()을 통해 전달받은 데이터를 바로 사용 가능

🧐 useNavigate()를 사용해 데이터를 전달하는 방법이 효율적이라고 생각한 이유

대표적으로 쇼핑몰로 예를 들자면 상품 카드 컴포넌트를 클릭하면 상세 페이지로 이동하는 것이 통상적이다. 비단 쇼핑몰 뿐만 아니라 많은 사이트들이 카드 컴포넌트 클릭 시 상세 페이지로 이동하는 경우가 많기에 상세 페이지에서 카드 컴포넌트의 정보를 이용하는 경우 역시 대다수이다.
이를 생각해보면 기존에 내가 사용한 방법은 카드 컴포넌트에서 상세페이지로 이동 시 fetch를 통해 상품 정보를 다시 가져와야 한다는 점에서 비효율적이며 state 속성을 통해 상품 정보를 이어받는 경우 굳이 서버와의 통신을 따로 할 필요가 없기 때문에 효율적이라고 생각했다.
이미 많은 사람들이 사용하고 있는 방식이겠지만 나와 같이 useNavigate()에 두 번째 인자를 넣을 수 있었다는 사실을 몰랐던 분들은 사용해보시기를 권하는 마음에서 블로그를 작성한다!