Archive

React.js CSS Animation

03 Mar 2021 | React

React.js CSS Animation

  1. Animations in React App

    • 리액트에서 애니메이션을 적용하는 법은 무수히 많다.
    • 그냥 일반적인 방식으로 css에 때려넣어도 적용은 된다.
    Modal {
    transition: all 0.3s ease-out;
}
open {
    opacity: 1;
    transform: translateY(0);
}
close {
	opacity: 0;
    transform: translateY(-100%);
}
    • 혹은 keyframes를 이용해도 된다.
    @keyframes ani {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    50% {
        opacity: 1;
        transform: translateY(20%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
open {
    animation: ani 0.3s ease-out forwards;
}
    • 하지만 state가 변함에 따라 수정, 삭제 등의 이벤트가 발생하면 문제가 발생한다. 예를 들어 마우스를 클릭하면 모달창이 없어진다고 치자. 위와 같은 방식으로 애니메이션을 걸어도 없어지는 과정에서 re-render가 일어나며 transition이 더 이상 작동하지 않는 것을 볼 수 있다.
    • 이를 극복하기 위한 개발자들의 노력으로 무수히 많은 transition 패키지가 세상에 나오게 되었다. 이는 react팀에서 만든 정식 패키지는 아니지만 많은 사용자들이 animation 효과를 위해 사용하고 있다.
    • 대표적으로 react-transition-group, react-motion, react-move, react-router-transition 등등이 있다.
    • React The Complete Guide에서는 이들 중 react-transition-group의 사용법을 소개하고 있다.

  2. react-transition-group

    • npm install –save react-transition-group
    • import Transition from ‘react-transition-group/transition’
    • 이 패키지에서 제공하는 Transition 태그를 이용한다.
    • 이 태그의 속성으로는 in, timeout, mountOnEnter, mountOnExit, 기타 생명주기 관련 속성들이 있다.
    • in은 show/hide 등 해당 컴포넌트의 진입과 종료의 트리거 역할을 한다. (boolean 형으로 default는 false이다)
    • timeout은 애니메이션 시간으로 거의 필수 속성으로 들어간다. (밀리 세컨드를 그냥 적어도 되고 객체로 appear, enter, exit을 나눠서 각각 시간을 적어줘도 된다. enter와 exit의 default는 0이고 appear는 default로 enter의 값을 따른다)
    • 보통 애니메이션은 화면 밖에 사용자가 볼 수 없는 공간에 ‘존재’하다가 애니메이션이 발동하면 사용자에게 보여주는 방식을 채택한다. 다른 말로 이미 해당 컴포넌트는 마운트가 되어있다는 뜻이다.
    • mountOnEnter 속성을 사용하면 해당 애니메이션 컴포넌트가 실행될 때 브라우저에 마운트되도록 설정할 수 있다.(boolean형으로 default는 false이다)
    • 마찬가지로 unmountOnExit 속성은 애니메이션이 끝나면 브라우저에서 사라지도록 설정할 수 있다. (boolean형으로 default는 false이다)
    • 기타 생명주기 속성으로 onEnter, onEntering, onEntered, onExit, onExiting, onExited가 있으며 주로 익명 함수로 onEnter={() => 동작}와 같이 작성하며 뜻은 이름 그대로이다.
    • 이 외에도 속성이 많은데 공식문서를 참고하자.
    • Transition 태그 안에 state를 매개변수로 익명 함수가 실행되며 함수의 실행문에 css 코드를 적는다. state는 entering, entered, exiting, exited 4단계의 변화를 겪는다. 이를 활용해 css에 적용할 수 있다.
    import Transition from 'react-transition-group/transition';
   
<Transition in={this.state.show} timeout={1000}>
    {state => (
    	<div
            style= />
    )};
</Transition>


  3. CSSTransition

    • react-transition-group 패키지를 활용한 스타일링의 또 다른 방식으로 CSSTransition을 이용할 수 있다.
    • import CSSTransition from ‘react-transition-group/CSSTransition’;
    • Transition 태그 대신 CSSTransition 태그를 사용한다.
    • state 익명 함수는 더 이상 사용할 수 없으며 그 대신 속성에 classNames={이름}을 주게 되면 이름-enter, 이름-enter-active, 이름-exit, 이름-exit-active 순서로 생명주기를 갖게 된다.
    • 이를 활용해서 css 파일에 애니메이션 효과를 줄 수 있다.
    • enter, exit 는 1 프레임 뒤에 삭제되므로 주로 초기화에 쓰고 보통 active 클래스명을 이용한다.
    import CSSTransition from 'react-transition-group/CSSTransition';
   
<CSSTransition in={this.state.show} timeout={300} classNames="fade">
	<div>안녕</div>
</CSSTransition>
    • classNames를 객체로 직접 커스터마이징해서 사용할 수도 있다
    <CSSTransition 
    in={this.state.show} 
    timeout={300} 
    classNames=>
	<div>안녕</div>
</CSSTransition>


  4. TransitionGroup

    • TransitionGroup는 Transition이나 CSSTransition 리스트를 관리할 수 있다.
    • ul 태그 아래에 많은 li 태그들이 딸려있다고 치자.
    • ul 태그 대신에 TransitionGroup 태그를 사용하고 속성으로 component=”ul” 이라고 명시한다. (default는 div)
    • li 태그들은 각각 CSSTransition이나 Transition 태그로 감싸준다.
    import TransitionGroup from 'react-transition-group/TransitionGroup';
   
<TransitionGroup component="ul">
	<CSSTransition timeout={300} classNames="item">
    	<li>안녕</li>
    </CSSTransition>
</TransitionGroup>


참고 자료

reactjs.org - 공식홈페이지

Udemy - React The Complete Guide

React Transition Group

Related Posts