React.js CSS Animation
03 Mar 2021 | ReactReact.js CSS Animation
-
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의 사용법을 소개하고 있다.
-
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> -
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> -
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>
참고 자료
Udemy - React The Complete Guide