[React] 뒤로 가기를 하려면? useNavigate를 써보아요!

React로 개발을 하다보면 꼭 사용하게 되는 라이브러리가 바로 React router-dom이다. 특히 웹앱을 개발하다보면 뒤로가기 버튼을 구현하여야 하는 경우가 있는데 이때 useNavigate를 사용하면 좋다.

 

다른 url로의 이동으로 React-Router의 Link 컴포넌트를 사용할 수 있다. 하지만 이는 특정 url 경로로의 이동을 위해 사용된다. 그리고 해당 Link 컴포넌트를 사용한 경우 클라이언트 측 라우팅을 건너뛰고 브라우저가 마치 a요소의 하이퍼링크처럼 전환을 정상적으로 처리하도록 할 수 있다. 하지만 종종 이는 시멘틱한 html의 작성을 위해 지양되는 경우가 발생한다.

 

이러한 Link 컴포넌트의 특징에 유의하여야 하며, 동시에 우리가 구현하고자 하였던 뒤로가기 기능을 구현하기 위해서는 useNavigate를 사용하는 것이 보다 적합했다.

 

[ useNavigate 사용법 (버튼 클릭 이벤트로 동작시키는 경우) ]

다음과 같이 사용할 수 있다.

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

const Test = () => {
	const navigate = useNavigate();
	
	// ...
	
	return (
            // ...
            <button onClick={() => navigate('/login')}>로그인 페이지로 이동</button>
            // ...
	);
};
 
export default Test;

 

[ useNavigate의 Type Declaration ]

navigate(to, { state={'any'}, replace='boolean'})

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: {
      replace?: boolean;
      state?: any;
      relative?: RelativeRoutingType;
    }
  ): void;
  (delta: number): void;
}

1. to

  - navigate의 첫번째 인자인 "to"는 생략이 가능하며 이동하고자 하는 url을 전달하여 주면 된다. (root로부터 상대경로를 지정한다.)

  - Link 컴포넌트의 to 인자와 동일하다.

 

2. state

  - "to"로 입력한 경로로 이동하면서 state에 전달하고자 하는 파라미터를 입력하여 이동한 경로에서도 state에 저장된 데이터를 전달받을 수 있다.

 

3. replace

  - boolean 타입으로 값을 결정할 수 있으며 기본값은 false이다. true로 지정할 경우 해당 url로 이동시 히스토리를 남기지 않게 된다.

     => 이 방법은 사용자의 토큰이 더 이상 유효하지 않은 경우에 해당 url로의 접근을 막고, redirect로 로그인 페이지로 이동시켰을 때 사용할 수 있다. 이 경우 뒤로가기를 눌러도 로그인 페이지로 넘어간  순간 url에 대한 히스토리가 존재하지 않기 때문에 로그인 사용자만 접근이 가능한 url로의 이동이 불가능하게 된다.

  - navigate(-1)을 사용하면, 사용자가 방문하였던 바로 직전 url로 이동하게 된다. 이는 브라우저가 제공하는 뒤로가기 기능도 동일하다. 

  - 마찬가지로 navigate(1)을 사용하면, 사용자이 바로 직후 url로 이동하게 된다.

 

Note: react-router-dom의 버전 6에서는 더이상 useHistory를 지원하지 않고 useNavigate를 제공하게 되었습니다.

 

[ 뒤로가기 버튼 구현 예시 ]

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

const Test = () => {
	const navigate = useNavigate();
	
	// ...
	
	return (
            // ...
            <button onClick={() => navigate(-1)}>뒤로가기</button>
            // ...
	);
};
 
export default Test;

 

[참고자료]

https://reactrouter.com/en/main/hooks/use-navigate

useNavigate v6.8.1