React 또는 웹 전반에서 애니메이션은 시간이 지남에 따라 페이지에서 UI 요소의 시각적 상태를 변경하는 프로세스입니다. 시각적 상태란 무엇을 의미할까요? 높이, 모양, 다른 요소에 상대적인 위치 등 모양에 영향을 미치는 요소의 모든 속성입니다. 애니메이션의 핵심 아이디어는 시간이 지남에 따라 페이지에서 볼 수 있는 속성을 변경한다는 것입니다.
React에서 애니메이션을 만드는 몇가지 방법이 있지만, 모두 크게 두가지 범주로 나뉩니다. CSS 규칙을 적용하여 시각적 상태를 변경하는 CSS 또는 JavaScript 애니메이션을 사용하여 요소의 속성을 변경합니다. 이러한 범주 중 하나에서 처음부터 애니메이션을 구현하거나 라이브러리를 사용할 수 있습니다.
CSS 규칙을 사용하여 애니메이션을 구성하거나, Animate.css와 같은 라이브러리를 사용할 수 있습니다.
JavaScript를 사용하기로 선택한 경우 사용자 정의 코드를 작성하여 애니메이션을 만들거나 GSAP 또는 Framer Motion과 같은 라이브러리를 사용할 수 있습니다. 라이브러리마다 각기 다른 장/단점이 있고 각 라이브러리 마다 애니메이션 접근 방식이 다릅니다.
Framer Motion은 React 애니메이션 라이브러리입니다. 선언형 프로그래밍을 제공하는 React 프로그래밍처럼, 애니메이션도 선언형 프로그래밍으로 구성할 수 있도록 도와줍니다. 명령형 프로그래밍 애니메이션 라이브러리와 달리 애니메이션 상태를 선언하면 상태 업데이트에 따라 모션이 변화합니다.
Production-Ready Animation Library for React | Framer Motion
프레이머 모션(Framer Motion)은 상당히 인기 있고 활발하게 사용되는 React 애니메이션 라이브러리입니다.
게다가 Framer Motion이 가능한 한 적은 코드로 복잡한 프로덕션급 애니메이션을 작성할 수 있도록 한다는 아이디어를 중심으로 구축되었다는 것입니다.
Framer Motion 코드 한 줄만 추가하면 드래그 앤 드롭을 구현할 수 있을 정도로 매우 편리합니다. 뿐만 아니라 SVG 애니메이션 및 애니메이션 레이아웃 트랜지션과 같은 작업을 단순화합니다.