[React]이벤트 핸들러 함수에서 Route 변경

본 포스팅은 React에서 이벤트가 발생했을 때, Route를 변경하는 방법을 소개합니다.

개요

일반적으로 React에서 특정 페이지로 이동하는 방법은 ‘react-router-dom’ 패키지를 사용하여 특정 페이지(혹은 컴포넌트)를 라우팅(Routing)하는 것이다. React는 SPA(Single Page Application)에 적합한 라이브러리로 ‘react-router-dom’ 패키지에서 제공하는 Link 컴포넌트를 사용하면 페이지를 새로고침하지 않고도 라우트(Route)를 변경할 수 있다.

하지만, Link 컴포넌트는 동적인 경로를 설정해야 하는 경우 사용하기 어려울 수 있다. 예를 들어, 특정 컴포넌트에서 onClick, onChange와 같은 이벤트가 발생했을 때, 이벤트 핸들러 함수에 전달되는 값에 따라 호출되는 라우트가 다를 수 있기 때문이다.

특정 이벤트 또는 조건에 따라 경로를 변경하는 것을 “Programmtically Navigate”라고 말하며, React 웹 어플리케이션은 ‘react-router-dom’ 패키지에서 제공하는 Hook을 사용하여 동적으로 라우팅할 수 있다. ‘react-router-dom’ 패키지 버전마다 제공하는 기능이 다르므로 React 프로젝트에 설치된 ‘react-router-dom’ 패키지 버전과 일치한 방법을 적용하도록 한다.

1. react-router-dom의 버전이 6이상인 경우

포스팅 작성일자 기준으로 react-router-dom version 6이상을 사용할 수 있다.

version 6.0.0부터 useNavigate Hook을 제공하며 수 있으며, 특정 페이지로 이동하기를 원한다면 매개변수로 특정 페이지의 path를 문자열로 전달한다.

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

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    // 라우팅 변경
    navigate('/home');
  };

  return (
    <button onClick={handleClick}>Go to New Route</button>
  );
};

export default MyComponent;

이전 페이지 혹은 다음 페이지로 이동하기를 원한다면 정수를 전달한다.

const navigate = useNavigate();

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

그리고 useNavigate Hook의 두 번째 매개변수에 다음 세 가지 옵션을 전달할 수 있다. relative 옵션에 대한 자료가 없어서 설명은 생략한다.

replace
state
relative

replace

replace 옵션을 true로 설정하면 페이지를 이동할 때, 히스토리를 남기지 않는다. 기본 값은 false다.

ㅇconst navigate = useNavigate();

// replace 옵션 사용
navigate('/home', { replace: true });

state

페이지 이동시 함께 전달할 상태(state)를 설정한다. 이동한 페이지에서 전달된 상태를 활용할 수 있다.

const navigate = useNavigate();

// state 옵션 사용
navigate('/home', { state: { id: 123 } });

2. react-router-dom의 버전이 5인 경우

react-router-dom version 5인 경우 useHistory Hook을 사용한다.

push() – 특정 페이지로 이동
goBack() – 현재 페이지의 이전 페이지로 이동
goForward() – 현재 페이지의 다음 페이지로 이동
go() – 원하는 이전 페이지 혹은 다음 페이지로 이동

import React from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  return (
    <>
      <button onClick={() => history.push('/home')}>
        Home
      </button>
      <button onClick={() => history.goBack()}>Go back</button>
      <button onClick={() => history.goForward()}>Go forward</button>
      <button onClick={() => history.go(2)}>
        Go 2 pages forward
      </button>
    </>
  );
};

export default MyComponent;