1. react-transition-group란?

• 원래는 애니메이션을 만들기 위해 (1) 애니메이션 주는 class를 CSS 파일에 만들고 (2) 컴포넌트 등장/업데이트시 조건문으로 className을 부착한다. 그런데 이를 편리하게 도와 주는 리액트 라이브러리이다.

2. 사용방법

• (1) 라이브러리 다운

  • yarn add react-transition-group
  • npm install react-transition-group

• (2) import

  import {CSSTransition} from 'react-transition-group';
  

  • 애니메이션 주고 싶은 컴포넌트 파일 상단에 import한다.

• (3) <CSSTransition>으로 감싸기

  function Detail(){
    return (
      <div>
        <CSSTransition in={true} classNames="wow" timeout={500}>
          <TabContent 누른탭={누른탭} />
        </CSSTransition>
      </div>
    )
  }
  

• (4) in, classNames, timeout 속성

  function Detail(){
    return (
      <div>
        <CSSTransition in={true} classNames="wow" timeout={500}>
          <TabContent 누른탭={누른탭} />
        </CSSTransition>
      </div>
    )
  }
  

  • in은 스위치로, true일 때 애니메이션을 적용한다.
  • classNames: 어떤 애니메이션을 적용할지 적어준다. (s가 붙는다)
  • timeout : 작동시간

• (5) CSS 파일에서 애니메이션 디자인

  • [Detail.scss]

  .wow-enter {
    opacity : 0
  }
  
  .wow-enter-active {
    opacity : 1;
  }
  

  • wow라는 애니메이션의 작동방식/정의를 적어준다.
    • .작명-enter : 컴포넌트 등장 시작 시 적용할 CSS
    • .작명-enter-active : 컴포넌트 등장중일시 적용할 CSS
    • ex) 투명도를 0~1로 변경하는 코드이다.

• (6) in={false}를 true로 설정하면 애니메이션 실행

  • [Detail.js]

  function Detail(){
  
    let [스위치, 스위치변경] = useState(false);
    return (
      <div>
       <Nav.Link eventKey="link-0" onClick={()=>{ 스위치변경(false); 누른탭변경(0) }}>Active</Nav.Link>
       <Nav.Link eventKey="link-1" onClick={()=>{ 스위치변경(false); 누른탭변경(1) }}>Option 2</Nav.Link>
        <CSSTransition in={스위치} classNames="wow" timeout={500}>
          <TabContent 누른탭={누른탭} 스위치변경={스위치변경} />
        </CSSTransition>
      </div>
    )
  }
  
  function TabContent(props){
   useEffect( ()=>{
      props.스위치변경(true);//탭내용 컴포넌트가 로드될 때 true
    });
  }
  

  • state를 원하는 상황에서 변경해주면 된다. 현재 코드는 tab버튼이 누르면 false로, 컴포넌트가 load되면 true가 되도록 설정했다. (useEffect 이용)