[javascript] 리액트 라우터의 라우팅 이벤트 트리거 방법

04 Dec 2023

javascript

리액트 라우터는 싱글 페이지 애플리케이션(Single Page Application)을 만들기 위한 라이브러리로써, 웹 애플리케이션의 라우팅을 쉽게 관리할 수 있도록 도와줍니다. 리액트 라우터를 사용하면 브라우저의 URL을 기반으로 페이지를 동적으로 변경할 수 있으며, 이에 따라 다양한 이벤트를 트리거할 수 있습니다.

이번 포스트에서는 리액트 라우터를 사용하여 라우팅 이벤트를 어떻게 트리거할 수 있는지 알아보겠습니다.

1. useHistory 훅 사용하기

리액트 라우터에서 제공하는 useHistory 훅을 사용하면 라우팅 이벤트를 트리거할 수 있습니다. useHistory 훅은 브라우저의 기록 스택을 사용하여 페이지 이동을 관리하는 데에 사용됩니다.

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

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

  const handleRouteChange = () => {
    // 원하는 라우팅 이벤트 실행
    // ...
  };

  const handleClick = () => {
    history.push('/new-route'); // 새로운 경로로 이동
    handleRouteChange();
  };

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

위 코드에서 useHistory 훅을 사용하여 history 객체를 가져오고, 이 객체를 통해 페이지 이동을 관리합니다. push 메서드를 사용하여 새로운 경로로 이동하고, 이동 후에 handleRouteChange 함수를 호출하여 라우팅 이벤트를 트리거합니다.

2. withRouter 컴포넌트로 감싸기

withRouter 컴포넌트를 사용하면 라우트 관련 정보를 해당 컴포넌트의 props로 받을 수 있습니다. 이를 활용하여 라우팅 이벤트를 감지하고 처리할 수 있습니다.

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

function MyComponent(props) {
  const handleRouteChange = () => {
    // 원하는 라우팅 이벤트 실행
    // ...
  };

  const handleClick = () => {
    props.history.push('/new-route'); // 새로운 경로로 이동
    handleRouteChange();
  };

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

export default withRouter(MyComponent);

위 코드에서 withRouter 함수를 사용하여 MyComponent를 감싸서 내보냅니다. 이렇게 하면 history 객체가 MyComponent의 props로 전달되어 라우팅 이벤트를 트리거할 수 있습니다.

이렇게 리액트 라우터의 라우팅 이벤트를 트리거하는 방법에 대해 알아보았습니다. 이제 원하는 라우팅 이벤트를 처리하거나 추가적인 작업을 수행할 수 있을 것입니다.

1. useHistory 훅 사용하기

2. withRouter 컴포넌트로 감싸기

참고 자료