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

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

---

1. motion 컴포넌트 기본

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

---

2. 레이아웃 애니메이션

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

---

3. 실무에서의 주의점

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