리액트 라우터는 싱글 페이지 애플리케이션(SPA)을 위한 라우팅 솔루션으로 인기가 많습니다. 브라우저 히스토리는 사용자가 뒤로가기 또는 앞으로 가기 버튼을 클릭했을 때 발생하는 이벤트를 의미합니다. 이번 포스트에서는 리액트 라우터에서 브라우저 히스토리 이벤트를 처리하는 방법에 대해 알아보겠습니다.

useHistory 훅 사용하기

리액트 라우터 v5부터 도입된 useHistory 훅을 사용하면 브라우저 히스토리 이벤트를 간편하게 처리할 수 있습니다. 이 훅은 현재 브라우저 히스토리에 대한 접근이 가능하며, 위치 변화에 따라 애플리케이션을 업데이트하는 데 사용할 수 있습니다.

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

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

  const handlePopState = () => {
    // 뒤로가기 또는 앞으로 가기 버튼 클릭 시 실행될 코드를 작성합니다.
    console.log('히스토리 변경');

    // 다른 작업 수행 가능
  };

  useEffect(() => {
    // 브라우저 히스토리 이벤트 등록
    window.addEventListener('popstate', handlePopState);

    // 컴포넌트 언마운트 시 이벤트 리스너 해제
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  return (
    // 컴포넌트 JSX 코드 작성
  );
};

위 예제에서는 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 popstate 이벤트 리스너를 등록하고, 컴포넌트가 언마운트될 때 이벤트 리스너를 해제합니다. handlePopState 함수는 뒤로가기 또는 앞으로 가기 버튼을 클릭했을 때 실행되는 콜백 함수입니다.

라우터 컴포넌트의 업데이트 후 처리하기

때로는 라우터 경로가 변경될 때마다 추가적인 작업을 수행해야 할 때도 있습니다. 예를 들어, 특정 페이지에서 스크롤 위치를 초기화하거나, 초기 상태를 설정하는 등의 작업입니다. 이러한 경우 useEffect 훅을 사용하여 라우터 경로가 변경될 때마다 작업을 수행할 수 있습니다.

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

const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    // 라우터 경로가 변경될 때마다 실행될 코드를 작성합니다.
    console.log('라우터 경로 변경:', location.pathname);

    // 다른 작업 수행 가능
  }, [location]);

  return (
    // 컴포넌트 JSX 코드 작성
  );
};

위 예제에서는 useLocation 훅을 사용하여 현재 경로 정보를 가져옵니다. useEffect 훅의 의존성 배열에 location을 넣어 라우터 경로가 변경될 때마다 효과적으로 작업을 수행할 수 있습니다.

마무리

리액트 라우터를 사용하면 브라우저 히스토리 이벤트를 쉽게 처리할 수 있습니다. useHistory 훅을 사용하여 히스토리 변경 이벤트를 감지하거나, useLocation 훅을 사용하여 라우터 경로가 변경될 때 추가 작업을 수행할 수 있습니다. 이를 통해 더욱 유연하고 사용자 친화적인 웹 애플리케이션을 구현할 수 있습니다.

참고 자료:

• React Router 문서
• React Router Hooks 문서