[React] useNavigate와 useLocation으로 페이지 간 데이터 전달하기

React 애플리케이션을 개발하다 보면, 다른 페이지로 네비게이션을 하면서 특정 데이터를 전달할 필요가 종종 있다.

이를 위해 useNavigate와 useLocation 이라는 두 React Router Hook을 사용할 수 있다.

 

---

 

01. useNavigate

useNavigate Hook은 페이지를 다른 경로로 이동시키는 함수를 제공한다. 이 Hook의 장점은 단순히 페이지를 이동시키는 것뿐만 아니라, 이동할 때 추가적인 상태(state) 또는 데이터를 전달할 수 있다는 점이다.

 

useNavigate의 형태

navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } )

 

useNavigate 사용법

먼저, react-router-dom 패키지를 설치해야 한다.

npm install react-router-dom --save

 

다음으로 useNavigate를 사용하는 방법을 예시 컴포넌트를 통해 살펴보자.

 

import { useNavigate } from 'react-router-dom';

function Main() {
  const navigate = useNavigate();
  const handleOnClick = () => {
    navigate('/other', { state: { message: "값을 전달받음" } });
  };

  return (
    <button 
      style={{width : "150px", height: "50px", background: "blue", color: "white"}}
      onClick={handleOnClick}
    >
      클릭 해보자
    </button>
  );
}

export default Main;

 

여기서 state 객체에 message라는 키를 추가하여 값을 전달한다. 이렇게 하면 Other 컴포넌트에서 이 값을 더 명확하게 참조할 수 있다.

 

---

 

02. useLocation

useLocation Hook은 현재 페이지의 URL 정보를 담고 있는 객체를 반환한다. 이 객체는 pathname, search, hash, state 등 여러 속성을 포함하고 있으며, useNavigate를 통해 전달된 state는 useLocation 를 통해 사용할 수 있다.

 

useNavigate 사용법

import { useLocation } from 'react-router-dom';

function Other() {
  const location = useLocation();
  const message = location.state?.message;

  return (
    <p style={{width : "140px", height: "30px", background: "red", color: "white"}}>
      {message ? message : "No message received"}
    </p>
  );
}

export default Other;

 

위 코드에서는 useLocation을 사용하여 state 객체에서 message 값을 추출하였다.

여기서 옵셔널 체이닝(?.)은 state가 undefined일 경우를 안전하게 처리하기 위해 사용되었다.

 

 

---

 

 

useNavigate와 useLocation은 React Router의 강력한 기능으로, 페이지 간에 데이터를 전달하고 애플리케이션의 네비게이션을 관리하는 데 있어 매우 유용하다. 이들을 사용하면, 사용자 경험을 향상시키고 더 동적인 애플리케이션을 구축할 수 있다.