🍃 react-transition-group 이란?

react-transition-group는 react-motion, framer-motion 같은 애니메이션 라이브러리가 아닙니다.

리액트에서 컴포넌트가 DOM에 마운팅되고 언마운팅되는 상황에 애니메이션을 적용할 수 있도록 도와주는 React 팀이 자체적으로 제공하는 라이브러리 입니다.

react-transition-group는 Transition, CSSTransition, SwitchTransition, TransitionGroup 이라는 4개의 컴포넌트를 제공하는데, 이에 대해 가볍게만 살펴보면 다음과 같습니다.

Transition

컴포넌트의 마운트, 언마운트를 'entering', 'entered', 'exiting', 'exited' 라는 상태를 기반으로 설명하며, 이 상태에 따라 컴포넌트를 조작할 수 있도록 도와주는 컴포넌트입니다. 단, 하나의 컴포넌트에 4가지 전환(transition) 상태만 부여할 뿐이며, 상태 부여에만 관심이 있기 때문에 전화 애니메이션에 대한 CSS를 조작하기 위해서는 이후에 설명할 CSSTransition 컴포넌트를 이용하는 것이 더 자연스럽습니다.

CSSTransition

Transition 컴포넌트의 모든 속성을 상속하며, 컴포넌트의 마운트, 언마운트 시점을 상태로 관리하며 이에 대한 CSS 효과나 애니메이션을 부여하기 위해 사용됩니다. Transition은 4가지의 상태값으로만 마운트, 언마운트를 상황을 설명하지만, CSSTransition에서는 임의적인 이름을 가진 클래스 이름의 뒤에 마운트, 언마운트 상황을 부여하여, CSS로 더 쉽게 조작할 수 있도록 합니다.

<CSSTransition nodeRef={nodeRef} in={inProp} timeout={200} classNames="my-node">
    <div ref={nodeRef}>
        {"I'll receive my-node-* classes"}
    </div>
</CSSTransition>

CSSTransition으로 묶인 컴포넌트가 마운트, 언마운트되는 상황은 my-node-enter, my-node-enter-active, my-node-exit, my-node-exit-active 의 상황으로 표현될 것이고, 이 클래스들의 이름을 이용하여 CSS를 작성하면, 전환 애니메이션을 쉽게 조작할 수 있습니다.

🍃 설치

npm install react-transition-group

🍃 Transition 버전 사용법

import { Transition } from ‘react-transition-group’;