[Tech Article] react-transition-group으로 router간 animation 구현하기

react-transition-group으로 router간 animation 구현하기

1. React-Transition-Group 이란?

• 리액트의 컴포넌트에 transition 효과를 쉽게 줄 수 있는 공식 라이브러리.
  이것을 이용해서 컴포넌트가 appear, enter, exit될 때 원하는 효과를 줄 수 있음

2. React-Transition-Group 라이브러리를 사용하게 되면?

• 기본적으로 router를 작성했을 경우 url 주소가 변경되게 되면 그에 맞는 component를 보여주게 됨.
  하지만 이런 Router 전환은 그냥 딱!! 애니메이션도 없이 표시되기에 딱딱해보임
  좀 더 자연스러운 Router 전환을 할 때 React-Transition-Group을 사용하면 됨.

느낀점

• 이번 프로젝트에 적용해볼까? 생각도 들지만, 아직 View가 다 완성된게 아니기에 나중에..
• react-router-dom을 쓰게되면 그냥 심심하게 딱! 딱! 보여주고만 끝나는데
  이렇게 애니메이션을 넣을 수 있다는 걸 보니까 신기했었다. 진짜 라이브러리의 끝은 어디일까?
• 나도 라이브러리 만들어서 올려봐야하는데.. 후.. 미루고만 있네
• 적용할 때 아래 링크 참고해서 적용해보자!

참고 링크

• [React] react-transition-group으로 router간 animation구현하기