Symbol
[React] 애니메이션을 구현하는 3가지 방법
React앱에서 애니메이션을 구현하는 몇 가지 방법과 그중에서 가장 추천하는 방법을 소개합니다.
2024-02-23
화면은 멋지게 구현했지만 요소들이 애니메이션 없이 틱틱 움직인다면 자칫 서비스가 딱딱하고 성의없어 보일 수 있습니다.
UX에 어울리는 몇가지 애니메이션을 추가하는것 만으로도 서비스는 유저에게 생동감있는 인상으로 비춰보일 것 입니다.
이 글에서는 React 앱에서 애니메이션을 구현하는 몇 가지 방법들에 대해 소개하고 그 중에서 제가 가장 추천하는 방법도 소개하겠습니다.

1. CSS transition 속성

CSS의 transition 속성을 사용하는 방법입니다. 이 방법은 React앱 뿐만 아니라 HTML, CSS를 사용하는 거의 모든 환경에서 사용할 수 있습니다.
하지만 hidden 상태에서도 요소가 DOM에 존재하기 때문에 해당 요소가 등장할때 실행할 initial 로직 등은 별도의 처리를 같이 해줘야 하는 수고로움이 있습니다.
무엇보다 React 컨셉과는 다소 어울리지 않기 때문에 단순 애니메이션 요소가 아니라면 추천드리는 방법은 아닙니다.

2. react-transition-group

두번째 방법으로는 라이브러리를 사용하는 것입니다. react-transition-group 은 React에서 가장 많이 쓰이고 있는 애니메이션 라이브러리중에 하나입니다.
이것을 사용하면 CSS 방식처럼 hidden상태에 DOM에 존재하지 않게 되며 CSS-in-JS 문법을 사용하여 js만으로 애니메이션을 구현할 수 있습니다.
CSS방식보다 React 스럽게 애니메이션을 구현할 수 있지만 간단한 애니메이션에도 지나치게 코드가 복잡해진다는 단점 있습니다.
아래는 라이브러리 공식 문서에서 제공하는 사용 예제 입니다.

3. @shinyongjun/react-transition

사실 이 글은 본격 라이브러리 홍보글 이었습니다.. 세번째 방법은 제가 직접 제작한 라이브러리 인데요. 1, 2번 방식의 장점만 살리고 단점은 보완한 궁극의 방법이라고 할 수 있습니다.
우선 코드부터 살펴보면 <Transition /> 이라는 컴포넌트를 가져와 요소에 감싸 준 다음 show Props에 boolean 값을 넘겨주기만 하면 끝입니다.
show값이 true일 때 애니메이션과 함께 등장, false 일 때 퇴장하게 됩니다.

애니메이션의 동작은 CSS로 제어할 수 있습니다.

만약 애니메이션의 종류를 다양하게 사용하고 싶다면 name Props를 사용하여 CSS 클래스의 식별자를 변환할 수 있습니다. (기본값은 default) 입니다.
아래는 식별자를 custom 이라는 값으로 바꾼 예제 코드 입니다.


마무리

개인적으로 서비스에서 애니메이션은 구현하자니 번거롭고 그렇다고 안하자니 너무 없어보이는 그런 요소라고 생각합니다.
오늘 소개해드린 방법들을 이용해서 조금 덜 번거롭게 원하시는 애니메이션 구현하시기 바랍니다.