3.[클라이언트] 레이아웃 애니메이션 만들기 [ React-Transition-Group + 오류 ]

레이아웃에 애니메이션을 적용시킨다.

 

  사용  

< layout-header.tsx >

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

    const LayoutHeader = () => {
        const [diaryDropdown, setDiaryDropdown] = useState<boolean>(false);

        const toggleDiary = () => {
            setDiaryDropdown((prev) => !prev);
        };

        return (
            <header className={styles.header}>
                ...
            <CSSTransition
                in={diaryDropdown}		// 켜지는 조건
                timeout={200}
                classNames={"slide-top-to-bottom"}
                mountOnEnter		// Mount 될때만 켜지도록
                unmountOnExit		// unMount되면 없어지도록
              >
                <ul className={styles.dropdown}>
                  <li>
                        ...

            </CSSTransition>

< index.scss >

    // 애니메이션 스타일링
    .slide-top-to-bottom-enter {
      transform: scale(1, 0) translate(0, -150%);
    }
    .slide-top-to-bottom-enter-active {
      transform: scale(1, 1);
      transition: all 200ms ease-out;
    }

    .slide-top-to-bottom-exit-active {
      transform: scale(1, 0) translate(0, -150%);
      transition: all 200ms ease-out;
    }

 

모듈 css가 아니라, 글로벌 css 로 스타일링을 적용한 이유

React-Transition-Group 의 사용에는

classNames="animation"

을 한다면  React-Transition-Group 은 자동적으로

animation-enter
animation-enter-active
animation-exit
animation-exit-active

을 만들어, 애니메이션을 사용할 수 있게 만들어준다.

 

문제는

React-Transition-Group 으로 모듈CSS 를 적용하고 싶지만 뭘 해도 적용되지않는다.

그에 따라, 글로벌 CSS 로 적용시켜, 사용하도록 했다.

 

https://dive-into-frontend.tistory.com/111

3. React Transition Group 으로, 자체 애니메이션 컴포넌트 만들기

 

---

추가사항

 

< layout-header.tsx >

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

    <CSSTransition in={diaryDropdown} ... >
                ...

    </CSSTransition>

해당 코드처럼, nodeRef 없이 사용하면, 아래의 오류가 발생한다.

 

엄격모드에서, findDomNode 는 생명주기의 악영향을 끼칠 수 있으므로, 삭제되었다는 말이다

 

사실 공식 DOCS 에서도

이처럼 useRef 를 사용하여, nodeRef 를 사용하기를 권장한다.

 

< layout-header.tsx >

    import { CSSTransition } from "react-transition-group";
    import { useState, useRef } from "react";
    
            ...
    const LayoutHeader = () => {
        const nodeRef = useRef(null);

        <CSSTransition in={diaryDropdown} nodeRef={nodeRef}... >
                    ...
        </CSSTransition>

 

이렇게 변경하면, 오류가 나오지 않는다.