[javascript] 리액트 라우터의 라우팅 애니메이션 효과

04 Dec 2023

javascript

리액트 라우터는 리액트 프레임워크에서 브라우저의 주소 변화에 따라 컴포넌트를 렌더링할 수 있는 방법을 제공합니다. 이를 통해 싱글 페이지 애플리케이션 (SPA)을 구축할 수 있으며, 브라우저의 기본 페이지 이동(페이지 로딩)없이 동적으로 컴포넌트를 변경할 수 있습니다.

리액트 라우터를 사용하여 페이지 이동이 발생할 때, 애니메이션 효과를 추가할 수 있습니다. 이를 통해 페이지 전환 시 부드럽고 시각적으로 매끄러운 경험을 제공할 수 있습니다.

라우팅 애니메이션 구현 방법

라우팅 애니메이션 구현에는 여러가지 방법이 있습니다. 아래에서는 가장 일반적인 방법인 CSS 트랜지션을 사용한 애니메이션을 예시로 설명하겠습니다.

필요한 패키지 설치하기
```
npm install react-router-dom
```

스타일 시트 생성하기

.page-enter {
  opacity: 0;
}

.page-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.page-exit {
  opacity: 1;
}

.page-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

애니메이션을 적용할 컴포넌트 작성하기

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Switch, Route, useHistory } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

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

  const handleHistoryChange = () => {
    // 히스토리 변화에 따른 애니메이션 로직을 여기에 추가할 수 있습니다.
  };

  history.listen(handleHistoryChange);

  return (
    <TransitionGroup>
      <CSSTransition
        key={history.location.key}
        timeout={300}
        classNames="page"
      >
        <Switch location={history.location}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
};

export default App;

애니메이션 효과를 적용할 때, CSSTransition 및 TransitionGroup 컴포넌트를 사용합니다. 또한, Switch와 Route 컴포넌트를 통해 경로와 컴포넌트를 매핑하며, location 객체를 이용하여 현재 위치를 추적하고 애니메이션을 적용합니다.

위와 같이 작성된 코드는 페이지 이동 시, page-enter와 page-exit 클래스가 추가되며, 이에 따라 CSS 애니메이션 효과가 적용됩니다.

이 외에도 라우팅 애니메이션을 구현하는 다양한 방법과 패키지들이 존재합니다. 참고 자료를 통해 더 많은 애니메이션 효과를 적용할 수 있습니다.