[React] 컴포넌트 전환 애니메이션 주는 법 (transition)

애니메이션 개발 스텝:

1. 애니메이션 동작 전 스타일을 담을 className 만들기

2. 애니메이션 동작 후 스타일을 담을 className 만들기

3. transition 속성도 추가

4. 원할 때 2번 탈부착

 

useEffect 를 쓰면 특정 state 아니면 props가 변할 때 마다 코드실행이 가능

 

동적인 UI 만드는 스텝:

1. 원하는 state 하나 만들고

2. state에 따라서 어떻게 변경될지 작성하고

3. 원할 때 state 변경하기

 

애니메이션 작동이 안되는 경우:

클래스명이 탈부착 되는지 확인해야 함.

클래스명이 계속 붙어있으면 작동 안되는게 맞음, 붙었다 떨어졌다 해야 함.

useEffect 실행 전 return 함수에서 클래스명을 공백(' ')으로 바꿔주면 되는데,

 

리액트 18버전 이상부터 automatic batch 라는 기능이 생겨서,

state 변경함수들이 연달아서 여러개 처리되어야 하는 경우,

state 변경함수를 다 처리하고 마지막에 한 번만 재렌더링 됨.

 

그래서 클래스명을 부착할 때 setTimeout으로 시간차를 약간 두면 automatic batching 에서 벗어날 수 있음.

 

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!