React-Transition-Group vs. React-Spring

React-Transition-Group vs. React-Spring

TailwindCSS에서도 물론 애니메이션을 구현하고 손쉽게 사용하는 기능을 제공하고 있지만, 동적인 상태에 따른 애니메이션 구현에 한계가 있기 때문에 최근 react-spring 라이브러리를 도입하게 되었다. 그런데 React 생태계에서 대중적인 애니메이션 라이브러리 중에서도 왜 react-spring을 선택하였는지, react-spring을 도입을 하였을 때의 특성과 장점을 정확히 알 수 없어서 가장 커뮤니티가 크다는 react-transition-group과 비교하면서 정리하고 팀에 공유해주려고 한다.

---

본 글은 react-transition-group과 react-spring의 모든 특성과 장단, 차이를 비교하는 것이 아닌 이들을 각각 실무에서 사용했을 때의 주관적인 의견을 적은 것이다.

공통점

대중적인 애니메이션 라이브러리에서 제공하는 기능들은 두 라이브러리 모두 제공한다.

React-Transition-Group의 특징

1. 네가지 주요 기능(Transition, CSSTransition, SwitchTransision, TransitionGroup)을 활용하여 컴포넌트 생명주기의 변화와 커스텀으로 부여하는 상태에 따라 CSS를 통한 애니메이션을 조작할 수 있다.
2. 이 라이브러리의 사용량이 react-spring의 사용량에 비해 월등히 많기 때문에 정보를 찾기가 매우 유용하며, 레퍼런스의 방대함은 라이브러리 도입에 매우 큰 장점이라고 생각한다.
3. classNames에 구현한 애니메이션을 key로 정의하는 방식으로 사용한다.

React-Spring의 특징

1. react-spring은 어디에서 정보를 찾아보나 “물리 기반 애니메이션”이라는 설명이 나오며 react-transition-group보다 정보량이 많지 않다.
2. 물리 기반 애니메이션이기 때문에 다른 애니메이션 라이브러리들에 비해 동작이 더욱 매끄럽다.
3. 대표적인 useSpring과 같은 API를 이용하여 React에서 자주 사용하는 custom hook 구문을 통해 애니메이션 조작이 가능하기 때문에 좀 더 직관적인 구현이 가능하다.

---

너무 간단하고 주관적인 정리인것 같다는 생각도 들긴 하지만 위에서 정리한 react-spring의 특징 2번과 3번이 너무나도 강력한 장점이라고 생각이 들었고, react-transition-group은 대중적으로 많이 사용하는 이유가 분명히 더 있을것이기 때문에 추후 사용해보고 다시 정리해보려한다.