[ React - navigate ] useNavigate로 state 전달하기

useNavigate

react에서 Client Side Routing을 편리하게 사용할 수 있도록 돕는

"react-router-dom"에서 제공하는 훅으로 react에서 주로 페이지를

동적으로 이동할 때 사용되는 훅이다. Link 태그와 다르게 훅으로서

함수와 함께 사용 가능하기 때문에 다양하게 활용 가능한 것이

특징이다.

 

useNavigate 사용예시

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

const navigate = useNavigate();

// 로그인 페이지로 이동
navigate("/login");

// 이전 페이지로 이동
navigate(-1);

기본적인 사용 예시는 위와 같다.

단순하게 Route의 pathName을 기재하는 것 뿐아니라
이전 페이지로 가는 경우 -1을 매개변수로 넣는 등

다양한 기능을 제공한다.

 

이동할 페이지에 State 전달

react에서 useState의 setState를 활용하여 state를 값을 얻는 방법 외

useNavigate의 state option을 사용하면 페이지로 이동 후

이동한 페이지에서 useLocation 훅을 통해 state를 전달 받는 것이 가능하다.

이러한 기능을 활용한다면 URL 파라미터에 값을 노출시키지 않고

특정 값을 private하게 전달해 줄 수 있다.

 

Navigate State 사용예시

/** current.jsx */
import { useNavigate } from 'react-router-dom';

export const current = () => {
  const navigate = useNavigate();

  const linkToNext = () => {
    // next 페이지로 이동하며 { state: fromCurrentPage } 전달
    navigate("/next", { state: { fromCurrentPage: "Hello, Next page?" } });
  }
    
  return <div onClick={linkToNext}> currentPage </div>
}



/** next.jsx */
import { useLocation } from 'react-router-dom';

const Next = () => {
  const location = useLocation();
  
  // "Hello, Next page?"
  console.log(location.state.fromCurrentPage);
  
  return <div> Filnally... Next Page! </div>
}

 

 

마치며...

약 2년간 react 를 주력으로 다뤄왔지만 useNavigate를 활용해서 다음 페이지로 state를 전달할 수 있다는 사실을 이번에 처음알게되었다... 다시금 부족함을 느끼고 멈추지 않고 꾸준히 정진해야겠다는 마음을 굳게 다지는 계기가 되었다.