[리액트/SCSS module] 리액트에서 CSS 애니메이션 쉽게 사용하기

- React-transition-group: CSSTransition

 

햄버거 버튼을 클릭했을 때, 메뉴가 부드럽게 뜨고, 메뉴 외부를 누르면 메뉴가 부드럽게 사라진다.

 

효과가 없다면 이런 느낌일 것이다.

 

 

 

일반 CSS에서 애니메이션을 적용하기 위해선

애니메이션 클래스를 생성해두고 컴포넌트가 업데이트가 될 때 className을 적용하면 된다.

 

이 로직을 적용시키는 게 까다롭거나 귀찮다면 react-transition-group 라이브러리를 사용하면 된다.

 

 

react-transition-group에는 한 개의 컴포넌트에게 transition을 적용시키는 CSSTransition,

router 혹은 여러 컴포넌트한테 transition을 적용시키는 TransitionGroup 등이 있다.

 

이번 예제에서는 CSSTransition을 사용하겠다.

 

[깃허브]

GitHub - reactjs/react-transition-group: An easy way to perform animations when a React component enters or leaves the DOM

[공식 사이트]

React Transition Group

 

 

 

- 설치 방법

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

npm과 yarn을 이용한 설치 방법이다.

 

 

(참고) 예제에서 쓰인 햄버거 버튼은 font-awesome에 있다.

[리액트] Font Awesome(폰트 어썸) 사용 방법

 

 

 

-사용 방법

[Navbar.jsx]

import

state 정의

사용 방법을 설명하기에 앞서 예제에서는 scss module을 사용한다. 

일반 css와 사용 방법이 약간 다르기 때문에 css의 경우는 공식 홈페이지의 예제를 참고하길 바람!!

 

 

CSSTransition을 사용하기 위해서 import는 필수!!

 

state는 햄버거 버튼과 관련된 showButton, 메뉴와 관련된 showMenu가 있다.

 

 

이제 CSSTransition 내부를 살펴보겠다.

CSSTransition을 사용하려면 in, timeout, classNames, unmountOnExit를 작성해주어야 한다.

 

in은 transition을 동작시키고 싶을 때를 작성하면 된다.

스위치 역할과 같다.

예시에서는 showMenu라는 스위치를 이용하여 애니메이션을 적용할 것이다.

 

timeOut은 애니메이션 작동 시간이다.

 

classNames는 어떤 애니메이션을 적용할 것인지 작성하면 된다.

여기서 module과 일반 CSS의 차이가 나타난다. 

module은 enter, enterActive, exit, exitActive를 CSS 파일에서 무엇으로 작명했는지 알려주어야 한다.

(예시) enter : fadeEnter, enterActive: fadeEnterActive, ...

 

enter은 컴포넌트가 등장할 때, enterActive는 컴포넌트가 등장 중일 때,

exit과 exitActive는 그 반대의 경우이다.

 

예시에서는 enter일 때 styles.enter 클래스의 CSS를 적용할 것이다. 자세한 건 밑 CSS 코드를 참고!! 👇

 

 

unmountOnExit은 컴포넌트가 종료된 후 마운트를 해제하려면 설정하면 된다. 

예시에서는 unmountOnExit가 없으면 애니메이션이 적용이 되지 않고 계속 메뉴창이 떠있게 된다.

계속 이 상태가 유지된다.

 

[navbar.module.scss]

css 애니메이션을 작성해준다.

 

---

-코드 정리

 

[Navbar.jsx]

showButton state가 true일 경우 햄버거 버튼을 보여준다. 그리고, 햄버거 버튼을 클릭하면 메뉴를 보여준다!

CSSTransition은 enter과 enterActive를 실행하게 된다.

 

 

 

 

exit과 exitActive가 동작되는 부분은 Menu 컴포넌트이다.

[Menu.jsx]

조금 복잡해 보일 수 있는 구조이지만, 여기서 핵심은 dimmer이다.

dimmer 박스를 클릭하면, showMenu의 상태는 false가 되어 메뉴가 사라지게 된다.

CSSTransition은 exit과 exitActive를 실행하게 된다.

 

 

[menu.module.scss]

dimmer 박스를 투명한 검은색으로 해준다.

 

---