Framer Motion으로 React 애니메이션 다루기

Framer Motion을 사용해서 React 컴포넌트에 자연스러운 모션을 추가할 때 기본적으로 알아 두면 좋은 개념들을 메모합니다.

1. motion 컴포넌트 기본

motion.div와 animate, initial, transition 속성으로 단순한 등장/퇴장 애니메이션을 만드는 패턴을 정리합니다.

2. 레이아웃 애니메이션

layout과 AnimatePresence를 이용해 리스트나 카드 레이아웃이 자연스럽게 재배치되도록 만드는 방법을 적어 둡니다.

3. 실무에서의 주의점

성능, 접근성, 사용자 피로도 측면에서 애니메이션을 어디까지 넣을지에 대한 기준을 남깁니다.