React Academy · 강의

모션 컴포넌트와 기본 애니메이션

div를 motion.div로 바꾸고 animate, initial, exit 속성으로 간단한 애니메이션을 구현합니다.

모션 컴포넌트와 기본 애니메이션은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Framer Motion이란 무엇입니까

Framer Motion은 React 애니메이션 라이브러리입니다. HTML 요소를 motion.*에 해당하는 요소로 바꾸면 CSS 키프레임 대신 속성을 통해 선언형 애니메이션을 추가할 수 있습니다.

설치

Framer Motion을 설치하고 애니메이션 기능을 가져오십시오.

npm install framer-motion

import { motion } from 'framer-motion';

첫 애니메이션

<div>를 <motion.div>로 바꾸고 initial, animate, transition 속성을 추가하십시오.

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
>
  Hello, Framer Motion!
</motion.div>

initial 속성

initial은 애니메이션의 시작 상태를 정의합니다. 요소가 animate 상태로 애니메이션되기 전에 시작하는 위치입니다.

// Fade in from left
<motion.div
  initial={{ opacity: 0, x: -50 }}
  animate={{ opacity: 1, x: 0 }}
/>

// Scale up from center
<motion.button
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
/>

animate 속성

animate는 목표 상태를 정의합니다. Framer Motion은 스프링 물리 효과나 지정된 이징을 사용해 initial과 animate 사이를 보간합니다.

<motion.h1
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, color: '#4f46e5' }}
  transition={{ duration: 0.6, ease: 'easeOut' }}
>
  Welcome
</motion.h1>

전환 옵션

transition 속성은 애니메이션의 움직임을 제어합니다: duration, ease, delay, type ('spring' | 'tween' | 'inertia').

transition={{
  type: 'spring',
  stiffness: 300,
  damping: 20,
  delay: 0.2,
}}

animate의 키프레임

애니메이션 값에 배열을 전달하면 여러 상태를 거치는 키프레임 애니메이션을 만들 수 있습니다.

<motion.div
  animate={{ x: [0, 30, 0] }}
  transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>

마우스 오버 및 탭 상태

whileHover와 whileTap은 마우스 오버 및 누르기 상호 작용을 위한 애니메이션 상태를 정의하며, 제스처가 끝나면 자동으로 되돌아갑니다.

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
  whileTap={{ scale: 0.95 }}
  style={{ backgroundColor: '#6366f1' }}
>
  Press me
</motion.button>

inView로 스크롤 애니메이션 만들기

요소가 뷰포트 안으로 스크롤될 때 애니메이션을 시작하려면 whileInView 속성을 사용하십시오.

<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.5 }}
>
  <h2>Revealed on scroll</h2>
</motion.section>

AnimatePresence와 exit 속성

exit는 구성 요소가 마운트 해제될 때의 애니메이션을 정의합니다. <AnimatePresence>로 감싼 경우에만 작동합니다.

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

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
    />
  )}
</AnimatePresence>

명령형 제어를 위한 useAnimate

useAnimate()는 선언형 속성 시스템 외부에서 프로그래밍 방식으로 애니메이션을 제어할 수 있는 scope 참조와 animate 함수를 반환합니다.

import { useAnimate } from 'framer-motion';

function ShakeButton() {
  const [scope, animate] = useAnimate();
  const handleClick = async () => {
    await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
  };
  return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}

애니메이션 줄이기

useReducedMotion() 훅을 사용해 사용자의 애니메이션 감소 설정을 존중하십시오.

import { useReducedMotion } from 'framer-motion';

function AnimatedCard() {
  const shouldReduce = useReducedMotion();
  return (
    <motion.div
      animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
    />
  );
}

빠른 확인

구성 요소가 도달해야 하는 애니메이션 상태, 즉 목표 상태를 정의하는 Framer Motion 속성은 무엇입니까?

복습

HTML 요소를 motion.*에 해당하는 요소로 바꾸십시오. 시작 상태에는 initial, 목표 상태에는 animate, 시간 설정에는 transition, 제스처에는 whileHover/whileTap, 스크롤로 시작되는 애니메이션에는 whileInView를 사용하십시오.

자주 묻는 질문

“모션 컴포넌트와 기본 애니메이션” 강의는 무료인가요?

네 — “모션 컴포넌트와 기본 애니메이션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“모션 컴포넌트와 기본 애니메이션”에서 뭘 배우나요?

div를 motion.div로 바꾸고 animate, initial, exit 속성으로 간단한 애니메이션을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“모션 컴포넌트와 기본 애니메이션” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기