10.react-transition-group

---

1.설치 및 사용

$ yarn add react-transition-group

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

그럼 step1. 으로 애니메이션 적용할 HTML들 감싸면 됩니다.

그럼 step2. 그리고 거기에 in, classNames, timeout 속성 넣으십시오.

• 샘플 예제 detail.js 에서 tap 버튼을 누르면 자연스럽게 transition 만들기 (react bootstrap 사용함)

// in detail.js

function Detail(props) {
  //  tap state 작성
  let [tap, editTap] = useState(0);

  return (
    <div>
      // CSS Transition 연결
      <CSSTransition in={true} classNames="wow" timeout={500}>
        <TabContent tap={tap} />
      </CSSTransition>
    </div>
  );
}

// TabContent 라는 component 만들어서 적용 0번 1번 2번 tap 을 누르면 화면이 전환 거 만들기

function TabContent(props) {
  if (props.tap === 0) {
    return <div>내용0</div>;
  } else if (props.tap === 1) {
    return <div>내용1</div>;
  } else if (props.tap === 2) {
    return <div>내용2</div>;
  }
}

• 위의 코드에서 CSSTransition 안에 속성은 in은 스위치입니다. true일 때 애니메이션을 적용해줍니다.

classNames는 어떤 애니메이션을 적용할지 작명해주는 부분이고

timeout은 작동시간이라 보시면 됩니다.

---

step3. 그럼 Detail.js에 딸려있는 CSS 파일로 가셔서 애니메이션을 하나 디자인해주시면 됩니다.

// in detail.scss

.wow-enter {
  opacity: 0;
}

.wow-enter-active {
  opacity: 1;
  transition: all 500ms;
}

아까 작명한 wow라는 애니메이션의 작동방식/정의를 내려주시면 됩니다.

.작명-enter 라는 클래스명은 컴포넌트 등장시작시 적용할 CSS

.작명-enter-active 라는 클래스명은 컴포넌트 등장중일시 적용할 CSS입니다.

저는 투명도를 0~1로 변경하기 위해 저렇게 했습니다. 그리고 transition은 서서히 변하게 해주세요~ 라는 속성입니다.

---

step4. 평소엔 in={true} 이걸 false로 해놨다가 원할 때 true로 바꿔주시면 됩니다.

// in detail.js

function Detail(props) {
  let [tap, editTap] = useState(0);
  let [onoff, editOnoff] = useState(false);
  return (
    <div>
      <Nav variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link
            eventKey="link-0"
            onClick={() => {
              editOnoff(false);
              editTap(0);
            }}
          >
            Active
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            eventKey="link-1"
            onClick={() => {
              editOnoff(false);
              editTap(1);
            }}
          >
            Option 2
          </Nav.Link>
        </Nav.Item>
      </Nav>
      <CSSTransition in={onoff} classNames="wow" timeout={500}>
        <TabContent tap={tap} editTap={editOnoff} />
      </CSSTransition>
    </div>
  );
}

function TabContent(props) {
  useEffect(() => {
    props.editOnoff(true); //탭내용 컴포넌트가 로드될 때 true
  });

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

• 탭의 버튼을 누르면 스위치가 false로 바뀌게 했습니다.

• 컴포넌트가 로드될 때 스위치가 true로 바뀌게 했습니다. (useEffect 이용)

단순히 opacity 만 조정해서 사용하였으나 CSS 로 만들 수 있는 모든 animation 은 react-transition-group 라이브러리를 사용해서 이것을 component 화 해서 만들 수 있습니다.

🔶 🔷 📌 🔑

Reference

• React transition group - https://reactcommunity.org/react-transition-group/

• coding apple - https://online.codingapple.com/course/react-basic/