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

React Transition Group 의 두번째 기능으로 CSSTransition 이 존재한다.

 

CSSTransition 은 Transition 과는 달리, state 를 주어주지 않고,

classNames 를 지정하면 자동으로 className 이 state 에 따라 달라진다.

 

혹은,  className 을 상태에 따라 직접 지정할 수 있다.

 

가장 중요한 점은 컴포넌트 자체를 감싸기만 해도, 전체에 대한 애니메이션 효과를 만들 수 있다는 것이다.

 

무슨말인지 모르겠지! 직접 보면서 이야기해보자!

 

이 기능을 사용하는 가장 큰 이유인, 컴포넌트 자체를 애니메이션이 있는 상태로 만들어 보자.

 

 

0. CSSTransition 의 기본 설명

        <CSSTransition  in={newModalOn} timeout={1500} mountOnEnter unmountOnExit 
            classNames={{
                enterActive: "ModalOpenA",
                exit: "ModalClose",
                exitActive: "ModalCloseA",
            }}
            >

            <p> 이거다! </p>

        </CSSTransition> 


[원래대로라면]
    classNames ={"fade"}라고 할당하면, 
    fade-enter, fade-enter-active, fade-exit, fade-exit-active
    4가지의 state 가 자동으로 정해지고, 그에 따른 css 를 선택해야하는데
    
        1. 자동생성이라, 동작원리를 모르겠어서, module 형태를 사용 할 수가 없음.
            (DOCS에도 모듈 형태를 사용하려면 직접 지정하라고 써있음)
        2. 왜지? 그냥 정말 동작이 안된다.
        
[그래서 직접 지정한 ClassNames 를 사용한다 ]

classNames : enter, enterActive, exit, exitActive 를 지정해서, className 을 할당

* 현재 enter 는 필요 없어서 할당하지 않음

	<더많은 classNames 의 종류들>

     https://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames

 

1. 컴포넌트 자체 애니메이션을 가지게 하기

★들어가기 전 유의사항

컴포넌트 자체를 애니메이션으로 만들때, module.css 를 사용 할 수가 없다. 

[state 에 의해, 자동으로 정해지는 스타일 이름이라, styles.xxx 로 컨트롤 불가능]

index.css(글로벌 CSS) 에, CSS 스타일 정의하여 사용하도록 한다.

 

1. CSSTransition 을 이용해 컴포넌트의 코드를 감싼다

     마치 div처럼 쓰면 된다

import styles from "./NEW-modal-mine.module.css";
import { CSSTransition } from "react-transition-group";     // 1. CSSTransition 을 import

const NewModalM = (props) => {
    const { newModalOn, newOnToggleModal } = props;

    return (
        <CSSTransition                          // 2. CSSTransition 으로 감싼다
            in={newModalOn}
            timeout={1500}
            mountOnEnter 			// Modal 이라 필수 [처음엔 없어야함]
            unmountOnExit 			 // Modal 이라 필수 [없애면 DOM 에서 사라져야함]
            classNames={{
                enterActive: "ModalOpenA",      // 3. enter, enterActive, exit, exitActive 를 지정해서, class 이름 할당
                exit: "ModalClose",
                exitActive: "ModalCloseA",
            }}                        
        >
            <div>
                <div className={styles.backDrop}></div>
                <div className={styles.content}>
                    <h1> 모달 내거</h1>
                    <p> 이것은 모달 </p>
                    <button onClick={newOnToggleModal}> 종료하기</button>
                </div>
            </div>
        </CSSTransition>                    // 2. CSSTransition 으로 감싼다
    );
};

export default NewModalM;

 

 

2. Global css 로 CSS 를 할당한다.

 <index.css> ====================================================================================================

    .ModalOpenA {
        animation: fade 500ms ease-in-out;
    }

    .ModalClose {
        opacity: 0.5;
        transition: all 1500ms ease-in-out;
    }
    .ModalCloseA {
        opacity: 0;
        transition: all 1500ms ease-in-out;
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

 

 

3. 사용하는 곳에서는 마치, 항상 존재하는 것처럼 그냥 코드에 넣으면 된다.

 

<App.js> ====================================================================================================

    import NewModalM from "./components/modal-mine/NEW-modal-mine";
    import { Transition } from "react-transition-group";
    import { useState } from "react";
    import "./App.css";

    const newOnToggleModal = () => {
        setNewModalOn((prev) => !prev);
    };

        return (
            <div className="App">
                <NewModalM newModalOn={newModalOn} newOnToggleModal={newOnToggleModal} />   // 항상 틀어둔다.
                <button onClick={newOnToggleModal}> 뉴토글 </button>              
            </div>
        );
    }

    export default App;

계속 있는 것 처럼 보여도, CSSTransition 에 의해, 자동으로 제어된다.