[javascript] 리액트 라우터의 기능 확장과 커스터마이징 방법

04 Dec 2023

javascript

리액트 라우터(React Router)는 리액트 애플리케이션에서 라우팅을 관리하기 위한 오픈 소스 라이브러리입니다. 기본적으로 제공되는 기능 외에도 확장하고 커스터마이징할 수 있는 방법이 있습니다. 이번 글에서는 리액트 라우터의 기능을 확장하는 방법과 커스터마이징하는 방법을 알아보겠습니다.

1. 라우터 확장하기

리액트 라우터를 기능적으로 확장하기 위해서는 withRouter를 사용할 수 있습니다. 이는 라우터 컴포넌트의 속성과 메서드에 접근할 수 있게 해줍니다. 예를 들어, 현재 라우트의 경로를 가져오기 위해서는 다음과 같이 withRouter를 사용할 수 있습니다.

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

const MyComponent = ({ history }) => {
  const path = history.location.pathname;
  // 경로에 따른 작업 수행
  return <div>...</div>;
}

export default withRouter(MyComponent);

위의 예제에서 withRouter는 MyComponent를 감싸줌으로써 history 객체에 접근할 수 있게 합니다. 이렇게 하면 라우터의 현재 경로에 따라 필요한 작업을 수행할 수 있습니다.

2. 라우터 커스터마이징하기

리액트 라우터를 커스터마이징하기 위해서는 라우터의 컴포넌트들을 변경하거나, 새로운 컴포넌트를 추가하여 사용할 수 있습니다. 예를 들어, 페이지 전환 시 애니메이션을 적용하고 싶은 경우에는 다음과 같이 TransitionGroup과 CSSTransition을 사용할 수 있습니다.

import { Switch, Route, useHistory } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

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

  return (
    <TransitionGroup>
      <CSSTransition key={null} classNames="fade" timeout={300}>
        <Switch location={history.location}>
          <Route path="/page1" component={Page1} />
          <Route path="/page2" component={Page2} />
          <Route path="/page3" component={Page3} />
          <Route component={NotFound} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
}

위의 예제에서 TransitionGroup은 전환 애니메이션을 적용할 컨테이너 역할을 하고, CSSTransition은 각각의 라우트 컴포넌트에 애니메이션 클래스를 적용합니다.

3. 결론

이 글에서는 리액트 라우터의 기능을 확장하고 커스터마이징하는 방법을 알아보았습니다. withRouter를 사용하여 라우터를 확장하고, TransitionGroup과 CSSTransition을 사용하여 라우터를 커스터마이징할 수 있습니다. 이러한 방법을 활용하여 애플리케이션에 필요한 기능을 추가하고 비주얼적인 요소를 개선할 수 있습니다.

1. 라우터 확장하기

2. 라우터 커스터마이징하기

3. 결론

참고 자료