[React] 3. 리액트에서의 애니메이션 (react-transition-group)

tab 기능을 만들것이다!!!! 걍 부트스트랩 이용 복붙

작고 귀여운 내 tab

부트스트랩 문법으로 버튼들마다 유니크한 eventKey를 부여 할 것이다.

    <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0">Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1">Option 2</Nav.Link>
        </Nav.Item>
     </Nav>

defaultActiveKey="link-0" 속성은 eventKey가 link-0인 버튼이 눌린것처럼 디폴트 값을 부여 하는것

let [tab, setTab] = useState(0);

몇번째 버튼을 눌렀는지 값을 저장할 state를 선언했다

.
.
<Nav.Link eventKey="link-0" onClick={() => setTab(0)}>
.
.

state 변경해주기, state가 0이면 0번째 div, 1이면 1번째 div를 보여주면 될것이다, 아쉽게 삼항연산자는 한가지 경우의 수만 컨트롤 하기 때문에 진정한 if문을 써야한다.

<TabContent tab={tab} />
.
.
function TabContent({ tab }) {
  if (tab === 0) {
    return <div>0번째 내용</div>;
  } else if (tab === 1) {
    return <div>1번째 내용</div>;
  }
}

하위 컴포넌트이기때문에 props 전달 받는것도 잊지말기
탭의 내용이 잘 리턴된다!!!

애니메이션 css를 적용하고 싶으면 간단하게 적용 가능한 라이브러리가 있다

yarn add react-transition-group 설치 ㄱㄱ

설치가 완료되었다면 import 하자

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

1. 애니메이션 필요한 곳에다 <CSStransition> 으로 감싸주기

<CSSTransition>
	<TabContent tab={tab} />
</CSSTransition>

2. 필요한 옵션 3개 (in, classNames, timeout 넣기)

<CSSTransition in={true} classNames="wow" timeout={500}>
	<TabContent tab={tab} />
</CSSTransition>

in은 스위치, true일때 애니메이션 적용해줌
timeout은 작동시간이라 보면된다

/*Detail.scss*/
.wow-enter{
    opacity: 0;
}
.wow-enter-active{
    opacity: 1;
    transition: all 500ms;
}

방금 지정한 class이름으로 css를 짜주면 된다.

이름-enter : 애니메이션 시작때 적용할 css
이름-enter-active : 애니메이션 동작할때 적용할 css

적용한 css에 의해 투명도가 0에서 1까지 0.5초에 걸쳐 바뀔것!!

3. 원할 때 스위치 켜기 (state로 저장해서 쓰자)

let [on, setOn]=useState(false);
.
.
. 
<CSSTransition in={on} classNames="wow" timeout={500}>

state 선언해주자

function TabContent(props) {
  useEffect(() => {
    props.setOn(true);
  });

  if (props.tab === 0) {
    return <div>0번째 내용</div>;
  } else if (props.tab === 1) {
    return <div>1번째 내용</div>;
  } else if (props.tab === 2) {
    return <div>2번째 내용</div>;
  }
}

<Nav.Link
            eventKey="link-0"
            onClick={() => {
              setOn(false);
              setTab(0);
            }}
          >
            Active
          </Nav.Link>

tab 내용 컴포넌트가 로드될때 true로 바뀌게 useEffect() 를 써주었고, 탭의 버튼을 누르면 스위치가 false로 바뀌게 하였다

다른 자세한 react-transition-group 사용법은 구글링 해보자

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)