React에서 애니메이션 사용하기

학습 목표

CSS Animations & Why They Are Sometimes Not Enough
Animating React Components With Extra Libraries

Animating React Apps & Components: Adding Smooth Animations To Our Apps

CSS Animations & Why They Are Sometimes Not Enough

CSS Animation을 사용해도 나쁘진 않다. CSS에서는 2가지 방법으로 애니메이션을 사용할 수 있는데 하나는 transition을 이용하는 것이고 또 다른 하나는 @keyframes를 이용하는 것이다. 후자가 좀 더 세밀하게 조정할 수 있다.

transition

.modal {
  transition: all 0.3s ease-out;
}

.modalOpen {
  opacity: 1;
  transform: translateY(0%);
}

.ModalClosed {
  opacity: 0;
  transform: translateY(-100%);
}

@keyframes

.ModalOpen {
  animation: openModal 0.4s ease-out forwards;
}

@keyframes openModal {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  50% {
    opacity: 1;
    transform: translateY(90%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

CSS 애니메이션을 사용하게 되면 Modal은 DOM에 남아 있다. 그저 우리 눈에만 안 보이는 것이기 때문이다. 이는 문제가 되는데 많은 요소로 채워진다는 것이고 이는 속도 저하를 유발한다. 또한, 접근성의 경우에도 좋지 않다.

만약 조건부 렌더링을 하면 되는 것이 아니냐고 물을 수 있지만 이렇게 하면 애니메이션을 기다리지 않고 즉각적으로 컴포넌트를 제거하기 때문에 원하는 애니메이션을 구현할 수 없다.

Animating React Components With Extra Libraries

React Transition Group

React Transition Group - 공식 사이트

설치: npm install react-transition-group --save

Transition

CSS transition을 이용할 수 있는 기능이다. 컴포넌트 형태로 되어 있어 어떤 파일에서든 사용 가능하다.

Transition이 있을 수 있는 주요 states이다.

‘entering’
‘entered’
‘exiting’
‘exited’

Props를 가진다.

in: 컴포넌트를 표시; enter 또는 exit state 트리거
- type: boolean
- default: false
mountOnEnter: 첫번째 in prop이 true일 때 컴포넌트가 “lazy mount”하길 원한다면 설정.
- type: boolean
- default: false
unmountOnExit: exiting이 끝난 후 컴포넌트가 unmount되는 걸 원한다면 설정.
- type: boolean
- default: false
timeout: transition의 밀리초 기간. 따로 설정해줄 수 있음.
- type: number { enter?: number, exit?: number, appear?: number }
  - appear: defaults to the value of enter
  - enter: defaults to 0
  - exit: defaults to 0
6가지 콜백 함수를 가짐.
- onEnter: “entering” 상태가 적용되기 전에 호출됨
  - type: Function(node: HtmlElement, isAppearing: bool) -> void
  - default: function noop() {}
- onEntering: “entering” 상태가 적용된 후에 호출됨
  - type: Function(node: HtmlElement, isAppearing: bool) -> void
  - default: function noop() {}
- onEntered: “entered” 상태가 적용된 후에 호출됨
  - type: Function(node: HtmlElement, isAppearing: bool) -> void
  - default: function noop() {}
- onExit: “exiting” 상태가 적용되기 전에 호출됨
  - type: Function(node: HtmlElement) -> void
  - default: function noop() {}
- onExiting: “exiting” 상태가 적용된 후에 호출됨
  - type: Function(node: HtmlElement) -> void
  - default: function noop() {}
- onExited: “exited” 상태가 적용된 후에 호출됨
  - type: Function(node: HtmlElement) -> void
  - default: function noop() {}

import { Transition } from "react-transition-group";

<Transition in={inProp} timeout={500}>
  {state => (
      // ...
  )}
</Transition>;

CSSTransition

Transition을 상속 받았으며 클래스명을 자동으로 작성할 수 있게 도와주는 prop이 있다.

classNames: 각 단계마다 접미사가 붙음. appear, enter, exit 상태에 사용할 수 있음. 따로 설정해줄 수 있음.

type: string

{ appear?: string, appearActive?: string, appearDone?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }

default: ‘’

TransitionGroup

Transition, CSSTransition은 단독으로 작동하지 않기 때문에 리스트인 경우 TransitionGroup을 사용할 수 있다. 이 때, 애니메이션은 이 컴포넌트에서 작동하는 것이 아니다. 자식을 Transition이나 CSSTransition으로 감싸서 지정해야한다. 참고로 className prop을 받기 때문에 스타일 지정을 할 수 있다.

component: null을 사용할 수 있으며 감쌀 컴포넌트를 의미함.
- type: any
- default: ‘div’

React Motion

인기있는 대안 라이브러리다. 이는 물리학으로 접근하기 때문에 처음에 사용하는 것은 어려울 수 있으나 자연스러운 모션을 주기에 적합하다.

React Motion - github 사이트

설치: npm install react-motion --save

React Move

이는 three JS에서 영향을 받았으며 이를 알고 있다면 유리할 것이다. 복잡한 애니메이션을 만들 때 유용하다.

React Move - 공식 사이트

설치: npm install react-move

React Router Transition

route transition을 쉽게 생성할 수 있도록 해준다. React Motion을 기본으로 한다. 즉, 페이지 전환 모션을 줄 수 있다. 이를 react-transition-group로 구현하기엔 까다로울 것이니 이 라이브러리를 이용하면 유용하다.

React Router Transition - 공식 사이트

설치: npm install react-router-transition --save

물론 다양한 라이브러리가 존재한다. 애니메이션을 이용해서 UX를 개선할 수 있으니 신경 썼으면 좋겠다.

강의명

Udemy : React 완벽 가이드

Twitter Facebook LinkedIn

권기영

Front End