react-transition-group

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

Transition

• 컴포넌트의 마운트, 언마운트를 entering, entered, exiting, exited 라는 상태를 기반으로 설명하며, 이 상태에 따라 컴포넌트를 조작하도록 도와주는 컴포넌트

CSSTransition

• Transition 컴포넌트의 모든 속성을 상속하며, 컴포넌트의 마운트/언마운트 시점을 상태로 관리하고 이에 대한 css 효과나 애니매이션을 부여하기 위해 사용함

<CSSTransition nodeREf={nodeRef} in={inProp} timeout={200} className='my-node'>
	<div ref={nodeRef} />
</CSSTransitio>

CSSTransition 으로 묶인 컴포넌트가 마운트, 언마운트 되는 상황은 className으로 주어진 my-node-enter, my-node-active, my-node-exit, my-node-active 상태로 표현됨

SwitchTransition

• Transition이나 CSSTransition을 하위 컴포넌트로 가지며, 상태 변화에 따라 컴포넌트 마운팅 상태가 변화면 상태 전환 사이의 랜더링을 제어함 , out-in, in-out으로 상태를 가짐

TransitionGroup

• SwitchTransition과 마찬가지로 상태 변화에 따라 컴포넌트가 마운트 혹은 언마운트 될 때 그 상태 전환 사이의 랜더링을 조작해줌
• 단, 마운트/언마운트 대상을 직접 기억하고 관리하며 애니매이션을 동시에 발생시킬 수 있으며 대상 컴포넌트를 각각의 key 로 관리

<TransitionGroup className="todo=list"<
 	{item.map(({id, text, nodeRef })=>{
    	<CSSTransition
        	key={id}
            nodeRef={nodeRef}
            timeout={500}
            className="itme"
            >
         <ListGroup.Item ref={nodeRef}>
         ...
         </Listgroup>
         </CSSTransition>
</TransitionGroup>