[React] 페이지 이동 기능 useNavigate 훅 사용 방법 정리

리액트에서 페이지 이동을 구현하는 과정에서 useNavigate는 매우 유용하게 사용됩니다.

상세한 이해를 위하여 해당 훅의 사용 방법에 대하여 간략하게 요약해보도록 하겠습니다.

 

 

1. 설치 및 임포트 방법

useNavigate는 react-router-dom 라이브러리에 포함된 훅으로,

해당 라이브러리가 설치되지 않은 경우, 먼저 설치를 진행해주셔야 합니다.

// npm을 사용하는 경우
npm install react-router-dom

// yarn을 사용하는 경우
yarn add react-router-dom

 

임포트 및 훅 사용을 위하여 객체를 선언하는 코드 예시는 다음과 같습니다.

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

const navigate = useNavigate();

 

 

2. 훅 사용 방법

선언한 navigate 객체를 다음과 같이 사용하면 되며,

함수 내부 등에서 유용하게 포함시켜주시면 됩니다.

// 특정 경로로 이동
navigate('/home');

// 특정 변수에 해당하는 경로로 이동(id 변수를 동적으로 받는 예시)
navigate(`/page/${id}`);

// 현재 페이지를 대체하며 이동 => 뒤로 가기했을 때 이전 페이지로 갈 수 없음(메인인 '/'페이지로 이동)
navigate('/login', { replace: true });

// 상대 경로로 이동
navigate('../sibling');

// 뒤로 가기
navigate(-1);

// 앞으로 가기
navigate(1);

 

 

3. 훅 추가 기능

useNavigate는 이동할 페이지에 state 전달 및 async delay 등의 추가 기능도 제공합니다.

이에 해당하는 예제 코드는 다음과 같습니다.

// 이동할 페이지에 state 속성을 포함하여 데이터 전달
navigate('/page', { state: { userId: 123 } });

// 비동기적인 동작 뒤에 호출(특정 작업 완료 후 페이지 이동 가능)
const handleSubmit = async () => {
    await doSomeAsyncWork();
    navigate('/page');
};