도입배경
React를 사용하여 SPA(Single Page Application)를 개발할 때, 페이지 전환이 일어날 때 애니메이션 효과를 적용하면 사용자 경험을 개선할 수 있다. 이에 대해 고민해본 결과,
react-transition-group 라이브러리를 도입하여 애니메이션 효과를 구현하기로 결정하게 되었다.
React-transition-group 라이브러리는 React 애플리케이션에서 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 이 라이브러리를 사용하면 페이지 전환 시 다양한 애니메이션 효과를 적용할 수 있다. 또한, 라우터 전환간의 애니메이션 적용을 쉽게 구현할 수 있어서 SPA의 사용자 경험을 향상시키는 데 도움이 된다.
이번 포스팅에서는 react-transition-group 라이브러리를 사용하여 라우터 전환간의 애니메이션 효과를 적용하는 방법에 대해 설명해보자. React-transition-group 라이브러리의 기능과 사용 방법, 그리고 라우터와 함께 사용하는 방법에 대해 자세히 알아보도록 하자.
React-Transition-Group이란?
React-transition-group은 React 애플리케이션에서 애니메이션 효과를 구현할 수 있는 라이브러리입니다. 이 라이브러리는 React의 생명주기 메서드와 함께 작동하여 React 구성 요소 간의 변화를 감지하고, 변화에 대한 애니메이션을 적용할수 있다.
React-transition-group은 다양한 애니메이션 효과를 쉽게 구현할 수 있도록 다양한 컴포넌트와 속성을 제공합니다. 이를 통해 React 애플리케이션에서 다양한 애니메이션 효과를 적용할 수 있습니다. 예를 들어, Fade, Slide, Scale 등의 효과를 사용할 수 있다.
React-transition-group은 React의 컴포넌트 중 하나인 Transition, CSSTransition, SwitchTransition, TransitionGroup 등의 컴포넌트를 제공합니다. 이러한 컴포넌트를 사용하면 애니메이션을 적용할 대상과 애니메이션의 종류, 지속시간, 지연시간 등을 설정할 수 있다.
React-transition-group은 React 애플리케이션에서 애니메이션 효과를 구현할 때 유용한 라이브러리 중 하나입니다. 이를 사용하면 간단한 설정만으로 React 애플리케이션에 다양한 애니메이션 효과를 적용할 수 있다.
그러면 이제 React-transition-group라이브러리 도입방법에 대해 알아보자.
React-Transition-Group
yarn 사용시
yarn add react-transition-groupnpm 사용시
npm install react-transition-groupReact-Transition-group 제공 컴포넌트
Transition
Transition 컴포넌트는 React 컴포넌트가 마운트, 언마운트, 업데이트 될 때 애니메이션을 적용할 수 있다. Transition 컴포넌트를 사용하면 React의 생명주기 메서드와 함께 작동하여 변화에 대한 애니메이션을 적용할 수 있습니다. Transition 컴포넌트는 직접 애니메이션 스타일을 작성할 수 있다.
CSSTransition
CSSTransition 컴포넌트는 CSS 애니메이션을 적용할 수 있도록 지원한다. CSSTransition 컴포넌트를 사용하면 CSS 클래스를 추가, 제거 또는 변경하여 애니메이션을 적용할 수 있습니다. 이를 통해 CSS의 keyframe을 활용하여 다양한 애니메이션을 쉽게 구현할 수 있다.
SwitchTransition
SwitchTransition 컴포넌트는 다른 컴포넌트로 전환될 때 애니메이션을 적용할 수 있다. SwitchTransition 컴포넌트는 React의 key prop를 이용하여 현재 보이는 컴포넌트와 새로운 컴포넌트를 전환할 때 애니메이션을 적용한다.
Transition Group
TransitionGroup 컴포넌트는 리스트를 관리할 때 사용합니다. 리스트에 새로운 아이템이 추가, 제거 또는 변경될 때 애니메이션을 적용할 수 있다. TransitionGroup 컴포넌트는 리스트 아이템을 key prop로 구분하고, 이를 기반으로 추가, 제거 또는 변경될 때 애니메이션을 적용한다.
이러한 컴포넌트들은 React-transition-group 라이브러리에서 제공되며, React 애플리케이션에서 애니메이션을 쉽게 구현할 수 있도록 도와준다. 각각의 컴포넌트들은 애니메이션 효과를 적용할 때 다양한 방법을 제공하며,
React의 생명주기 메서드와 함께 작동하여 변화에 대한 애니메이션을 적용한다.
라이브러리 도입 예시
//app.js
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { Routes, Route, useLocation } from "react-router-dom";
import "./Transition.css";
import { useSelector } from "react-redux";
import mainPage from "./Pages/mainPage";
import examplePage from "./Pages/examplePage
const App: React.FC = () => {
const location = useLocation();
const animation = useSelector((state: any) => state.animation);
return (
<TransitionGroup className="transition-group">
<CSSTransition
key={location.key}
classNames={animation}
timeout={300}
>
<Routes location={location}>
<Route
path="/"
element={<mainPage />}
/>
<Route
path="/example"
element={<examplePage />}
/>
</Routes>
</CSSTransition>
</TransitionGroup>
);
};
export default App;
CSSTransition에서는 classNames prop으로 지정한 클래스 이름에 따라서 컴포넌트의 진입/진출 애니메이션 효과를 적용할 수 있습니다. 이때, classNames prop으로 지정한 클래스 이름은 다음과 같은 규칙에 따라 작성해야 합니다.
- enter 클래스
enter 클래스는 컴포넌트가 진입할 때 적용됩니다. 즉, in prop이 true가 되어 컴포넌트가 나타날 때 적용된다.
- enter-active 클래스
enter-active 클래스는 enter 클래스가 적용될 때부터 컴포넌트가 나타날 때까지 적용된다. 이 클래스에서는 애니메이션의 지속 시간과 타이밍 함수를 설정한다.
- exit 클래스
exit 클래스는 컴포넌트가 나갈 때 적용된다. 즉, in prop이 false가 되어 컴포넌트가 사라질 때 적용된다.
- exit-active 클래스
exit-active 클래스는 exit 클래스가 적용될 때부터 컴포넌트가 사라질 때까지 적용된다. 이 클래스에서도 애니메이션의 지속 시간과 타이밍 함수를 설정한다.
예를 들어, 다음과 같이 CSS 코드를 작성하여 애니메이션 효과를 적용할 수 있습니다
.next-enter {
transform: translateX(100%);
opacity: 1;
}
.next-enter-active {
transform: translateX(0);
transform: translateY(0);
opacity: 1;
transition: all 300ms ease-in;
}
.next-exit {
transform: translateX(0);
transform: translateY(0);
opacity: 1;
}
.next-exit-active {
transform: translateX(-30%);
transform: translateZ(-50%);
opacity: 0.95;
transition: transform 300ms linear;
}
.prev-enter {
transform: translateX(-30%);
opacity: 0.95;
}
.prev-enter-active {
transform: translateX(0);
opacity: 1;
transition: all 300ms ease-in-out;
}
.prev-exit {
transform: translateX(0);
}
.prev-exit-active {
transform: translateX(100%);
transition: transform 300ms ease-in-out;
}
.up-enter {
transform: translateY(100%);
}
.up-enter-active {
transform: translateY(0);
transition: transform 300ms ease-in-out;
}
.up-exit {
transform: translateY(0);
}
.up-exit-active {
transform: translateY(0%);
transition: transform 300ms ease-in-out;
}
.down-enter {
transform: translateY(0%);
}
.down-enter-active {
transform: translateY(0);
transition: transform 300ms ease-in-out;
}
.down-exit {
transform: translateY(0);
}
.down-exit-active {
transform: translateY(100%);
transition: transform 300ms ease-in-out;
}
적용 예시
결론
react-transition-group을 도입해보며 느낀 몇몇 장단점을 정리해보자.
장점
-
애니메이션 구현이 쉬움
React-transition-group라이브러리는 애니메이션 효과를 적용하는 것을 쉽게 구현할 수 있도록 도와준다. 라이브러리에서 제공하는Transition, CSSTransition, SwitchTransition, TransitionGroup등의 컴포넌트를 이용하여 다양한애니메이션 효과를 쉽게 적용할 수 있다. -
생명주기 메서드와 함께 작동
React-transition-group라이브러리의 컴포넌트들은 생명주기 메서드와 함께 작동하여 변화에 대한 애니메이션을 적용할 수 있다. 이를 통해애니메이션 효과가 더욱 자연스러워진다. -
다양한 옵션 제공
React-transition-group라이브러리에서는 다양한 옵션을 제공하여 커스터마이징이 가능하다. 각 컴포넌트에서 제공하는 속성을 이용하여애니메이션 효과를 자유롭게 조정할 수 있다. -
코드의 가독성 향상
React-transition-group라이브러리를 사용하면서 코드의 가독성이 향상된다. 라이브러리를 사용하면서 애니메이션 효과를 적용할 때, 코드가 간결해지고가독성이 높아진다.
단점
-
라이브러리의 제한사항
React-transition-group라이브러리에서는 지원하는 애니메이션 효과만 사용할 수 있다. 이를 커스터마이징하기 위해서는 추가적인 코드 작성이 필요하다. 또한, 라이브러리에서 지원하는 컴포넌트를 사용하기 위해서는컴포넌트의 구조와 제한사항을 이해해야 한다. -
추가적인 라이브러리 필요
React-transition-group라이브러리를 사용하면서 추가적인 라이브러리를 사용해야 하는 경우도 있다. 예를 들어, CSSTransition을 사용하려면CSS 애니메이션을 작성해야 하기 때문에 CSS 라이브러리를 함께 사용해야 한다. -
초기 구현이 어려울 수 있음
React-transition-group라이브러리를 처음 사용하려면 초기 구현이 어려울 수 있다. 라이브러리에서 제공하는 컴포넌트들과 속성들을 이해하고, 애니메이션 효과를 작성하는 방법을 익히는 과정이 필요하다. 또한, 애니메이션 효과를 구현할 때생명주기 메서드를 적절하게 활용해야 하기 때문에React에 대한 이해도가 높아야 한다. -
라이브러리 크기
React-transition-group 라이브러리는 추가적인 라이브러리를 사용하지 않아도 되지만, 라이브러리 자체의 크기가 크기 때문에 번들 사이즈가 커질 수 있다. 따라서, 라이브러리를 사용할 때 번들 사이즈를 줄이기 위한 최적화 작업이 필요할 수 있다.
-
애니메이션 성능
React-transition-group라이브러리를 사용할 때, 애니메이션 성능에 대한 고려가 필요합니다. 애니메이션 효과를 적용하는 과정에서 브라우저가렌더링을 많이 하게 되어 성능 문제가 발생할 수 있다. 따라서, 적절한 최적화를 통해 애니메이션 성능을 개선해야 한다. -
CSS 애니메이션 작성에 대한 이해도 필요
React-transition-group라이브러리에서 제공하는 CSSTransition 컴포넌트를 사용하려면 CSS 애니메이션 작성에 대한 이해도가 필요하다. 애니메이션 효과를 작성하기 위해서는 CSS 속성과 키 프레임을 이용한애니메이션 작성 방법을 이해하고 있어야 한다.
결론
이러한 장단점을 고려하여, React-transition-group 라이브러리를 적절하게 사용하면 라우터 전환간 애니메이션 효과를 쉽게 구현할 수 있으며, 코드의 가독성을 향상시킬 수 있다. 하지만, 라이브러리의 제한사항과 애니메이션 성능 문제에 대한 고려가 필요하다.
