• 목차

프레이머 모션(Framer Motion)은 애니메이션에 직관적으로 접근합니다. JSX 마크업을 래핑(wrapping)하고 원하는 애니메이션 타입을 설정할 수 있도록 속성(props)을 허용하는 모션 컴포넌트를 제공합니다.

프레이머 모션의 핵심 컴포넌트는 다음과 같습니다.

• motion 컴포넌트
• AnimatePresence 컴포넌트

AnimatePresence 사용법

AnimatePresence 컴포넌트를 사용하기 위해 AnimatePresence 컴포넌트를 가져옵니다.

import { motion, **AnimatePresence** }from 'framer-motion';

motion 컴포넌트에 exit 속성(prop)을 추가하여 원하는 종료 애니메이션을 설정합니다.

**<AnimatePresence>**
	<motion.div **exit={{ x: '-100vh', opacity: 0 }}**>
		모션 컴포넌트가 페이지 제거될 때 
	</motion.div>
**</AnimatePresence>**

AnimatePresece 컴포넌트로 감싸인 motion 컴포넌트가 DOM에서 제거(unmount)되면 바로 사라지는 대신, 왼쪽 방향으로 100vh 만큼 슬라이드되고 투명해지면서 사라집니다.

AnimatePresence 컴포넌트 내부에 여러 컴포넌트가 직계 자식인 경우, 각각 고유한 key 값이 있어야 DOM에서 해당 요소를 추적할 수 있습니다.