1. Udemy(6)

Animating React

• 설치 : npm install || yarn add react-transition-group

✍️ Transition

• import { Transition } from 'react-transition-group'
• Entering, Entered, Exiting, Exited 네가지 내부 상태를 관리하며 구성요소에 컨텍스트별 props를 적용하여 사용할 수 있다

// 예시

<Transition 
  in={props.show} 
  timeout={300} 
  mountOnEnter 
  unmountOnExit>
  
  {state => (  // state => 현재 전환 상태('entering', 'entered' ...) 호출
    <p>{state}</p>  
  )}
  
</Transition>

in

• 구성 요소를 표시한다 시작 또는 종료 상태를 트리거한다

timeout

• 전환 기간(밀리초)

mountOnEnter

• 기본적으로 하위 구성 요소는 상위 전환 구성 요소와 함께 즉시 마운트된다
• 하지만 구성 요소를 느슨하게 마운트하려면 mountOnEnter를 설정할 수 있다
• 첫번째 전환 후 구성요소는 마운트 된 상태로 유지되며 애니메이션 종료 후 마운트를 해제하기 위해선 unmountOnExit를 설정해 준다

unmountOnExit

• 첫 번째 전환 후 mountOnExit를 지정하지 않는 한 구성 요소는 exit 상태에서도 마운트된 상태로 유지된다

RefElement

EnterHandler		ExitHandler
onEnter	입력 중 상태가 적용되기 전에 실행된 콜백	onExit	종료 상태가 적용되기 전에 콜백이 실행
onEntering	들어가는 중 상태가 적용된 후 콜백이 실행	onExiting	종료 상태가 적용된 후 콜백이 실행
onEntered	입력됨 상태가 적용된 후 콜백이 실행	onExited	종료 상태가 적용된 후 콜백이 실행

✍️ CSSTransition

• import { CSSTransition } from 'react-transition-group'
• Transition 구성 요소를 기반으로 하므로 모든 props를 상속한다
• classNames를 설정할 수 있다
• classNames={ { ...styles } } 오브젝트를 이용하여 각 개별 className을 독립적으로 지정할 수도 있다

// 예시

const animationTiming = {
  enter: 400,
  exit: 1000,
};

<CSSTransition
  in={props.show}
  timeout={animationTiming}
  classNames='fade-slide'>
    
/*  --- or ---  */

<CSSTransition
  in={props.show}
  timeout={animationTiming}
  classNames={{
    enter: '',
    enterActive: 'ModalOpen',
    exit: '',
    exitActive: 'ModalClosed',
  }}>
    
    
// CSS
    
.fade-slide-enter {
  opacity: 0;
}
.fade-slide-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.fade-slide-exit {
  opacity: 1;
}
.fade-slide-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

✍️ TransitionGroup

• div를 기본적으로 렌더링하지만 component props을 이용하여 변경할 수 있다
• Router 혹은 여러개 Transition 또는 CSSTransition을 적용시키고 싶을 때 상위에 사용하는 컴포넌트이다 이것을 사용할 경우 map함수와 같이 Transition 각각에게 key값을 부여해줘야 에러없이 사용할 수 있다

// 예시

const listItems = items.map((item, index) => (
  <CSSTransition key={index} classNames="fade" timeout={300}>
    <li className="ListItem">
      {item}
    </li>
  </CSSTransition>
));

return {
  <TransitionGroup component="ul" className="List">
    {listItems}
  </TransitionGroup>
}

---

대체

• React-Move
• React-Motion
• React-Router-Transition