[shop-project] React 애니메이션

🌈 react-transition-group

• 리액트 애니메이션 라이브러리의 일종이다.
• 컴포넌트 등장/업데이트 시 transition을 쉽게 줄 수 있는 라이브러리 이다.

🍎 animation 라이브러리 설치 방법

1) 라이브러리 설치
npm install react-transition-group 터미널에 설치

2) 애니메이션을 적용할 페이지 상단에 import해주기
import { CSSTransition } from 'react-transition-group';

3) animation이 필요한 부분을 <CSSTransition>태그로 감싸주기
<CSSTransition> <컴포넌트> </CSSTransition>

4) 태그 안에 속성 넣기 ➡ in, classNames, timeout
<CSSTransition in={true} classNames={작명} timeout={500}>
❗ timeout : 애니메이션 delay (애니메이션 등장 전 delay시간 = 0.5초 후에 애니메이션 시작)
❗ classNames : 클래스명
❗ in : 스위치 기능 (state값을 true 혹은 false로 지정 후, state명을 넣어준다)

5) (css/scss 파일에 적용) `-enter/ -enter-active 로 적용하기
.클래스명-enter { } ➡ 애니메이션이 시작할 때 적용하는 css
.클래스명=enter-active { } ➡ 애니메이션이 동작할 때 적용하는 css
❗ enter 명령어는 등장 애니메이션에 활용하는 것. 다양한 스킬은 구글링!!

🐻 tap에 transition 애니메이션 적용하기

// App.js
import React, { useState, useContext } from 'react';  
import TapContent from './component/TapContent'; 
import { CSSTransition } from 'react-transition-group';  // import 해준다

function App() {
 
  let [switchs, setSwitchs] = useState(false)  // 스위치는 기본 꺼져있다
  let [누른탭, 누른탭변경함수] = useState(0);  // 기본 설정은 0이다. 

  return (
    <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
       <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{ setSwitchs(false); 누른탭변경함수(0)}}>1번탭</Nav.Link>
       </Nav.Item>
       <Nav.Item>
          <Nav.Link eventKey="dink-1" onClick={()=>{ setSwitchs(false); 누른탭변경함수(1)}}>2번탭</Nav.Link>
       </Nav.Item>
       <Nav.Item>
          <Nav.Link eventKey="dink-2" onClick={()=>{ setSwitchs(false); 누른탭변경함수(2)}}>3번탭</Nav.Link>
       </Nav.Item>
    </Nav>
   
    // 애니메이션을 적용하고자 하는 TapContent 컴포넌트를 감싸준다    
   <CSSTransition in={switchs} classNames="effect" timeout={500}> 
                // 스위치 state값 false적용
        <TapContent 누른탭={누른탭} 누른탭변경함수={누른탭변경함수}/>
   </CSSTransition>
  )
}
❗ 스위치변경함수는 false이다. 즉 기본적으로 스위치가 꺼져있고, TapComponent 컴포넌트에서
useEffect()를 통해 컴포넌트가 "등장"하면 스위치가 켜지도록(true) 만든다.
버튼을 누를때마다 스위치는 false가 되고, 누른 버튼의 컴포넌트가 렌더링 되며 해당 부분의 스위치가 true가 됨



// TapContent.js
import React, { useState} from 'react'; 

function TapContent(props) {

  useEffect( ()=> {
    props.setSwitchs(true)
  });

  if (props.누른탭 === 0) {
   return <div> 1번탭누르면 보여주기 </div>
  }
  else if(props.누른탭 === 1) {
    return <div> 2번탭누르면 보여주기 </div>
  }
  else if(props.누른탭 === 2) {
    return <div> 3번탭누르면 보여주기 </div>
  }
}