Framer Motion 사용법: 초보자 가이드

Framer Motion 사용법: 초보자 가이드

Framer Motion은 React를 위한 인기 있는 애니메이션 라이브러리로, 개발자가 최소한의 노력으로 유연하고 시각적으로 매력적인 애니메이션을 만들 수 있도록 설계되었습니다.

세련된 사용자 인터페이스를 구축하든 동적인 웹 경험을 만들든 Framer Motion은 애니메이션을 쉽고 우아하게 만들 수 있는 강력한 도구를 제공합니다.

이 가이드에서는 코드 예제와 모범 사례를 통해 Framer Motion 사용법의 기초를 안내합니다.

핵심 요약

• Framer Motion은 직관적인 API와 강력한 기능을 통해 React 애니메이션을 단순화합니다.
• 주요 도구로는 애니메이션 상태 관리를 위한 motion 컴포넌트, AnimatePresence, variants가 있습니다.
• 모범 사례로는 간단하게 시작하고, variants를 재사용하고, 성능을 최적화하는 것이 있습니다.

 

 

Framer Motion이란 무엇일까요?

 

Framer Motion은 React 애플리케이션에서 애니메이션을 단순화하는 선언적 라이브러리입니다.

다음과 같은 기능을 제공합니다.

• 사용 편의성: 직관적인 구문과 API
• 유연성: 간단하고 복잡한 애니메이션 모두 지원
• 성능: 부드러운 전환을 위해 최적화
• 접근성: 사용자를 위한 reduced-motion 설정을 처리

 

설치

 

시작하려면 npm 또는 yarn을 통해 Framer Motion을 설치합니다.

npm install framer-motion
# 또는
yarn add framer-motion

 

핵심 개념

Framer Motion은 몇 가지 핵심 컴포넌트와 훅을 기반으로 구축됩니다

 

필수적인 요소는 다음과 같습니다.

• motion 컴포넌트: 애니메이션을 적용할 HTML 요소를 motion 컴포넌트로 대체합니다.
• AnimatePresence: 마운트 및 언마운트 애니메이션을 처리합니다.
• useAnimation: 애니메이션을 프로그래밍 방식으로 제어합니다.
• Variants: 재사용 가능한 애니메이션 상태를 정의합니다.

기본 애니메이션

상자를 애니메이션하는 간단한 예제입니다.

이 예제에서:

• motion.div는 애니메이션을 적용할 div를 만듭니다.
• animate 속성은 대상 애니메이션 상태를 지정합니다.
• transition 속성은 애니메이션 지속 시간을 제어합니다.

Variants 추가

Variants를 사용하면 여러 애니메이션 상태를 정의하고 그 사이를 전환할 수 있습니다.

const boxVariants = {
  hidden: { opacity: 0, x: -100 },
  visible: { opacity: 1, x: 0 },
};

const App = () => {
  return (
    <motion.div
      variants={boxVariants}
      initial="hidden"
      animate="visible"
      transition={{ duration: 0.8 }}
      style={{ width: 100, height: 100, backgroundColor: 'red' }}
    />
  );
};

 

여기서:

• boxVariants는 hidden 및 visible이라는 두 가지 상태를 정의합니다.
• initial 및 animate 속성은 사용할 variant를 지정합니다.

 

AnimatePresence 사용

요소가 DOM에 들어오거나 나갈 때 애니메이션을 적용하려면 AnimatePresence를 사용합니다.

import { motion, AnimatePresence } from 'framer-motion';
import React, { useState } from 'react';

const App = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>토글</button>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
            style={{ width: 100, height: 100, backgroundColor: 'green' }}
          />
        )}
      </AnimatePresence>
    </div>
  );
};

export default App;

 

모범 사례

• 간단하게 시작: 기본적인 애니메이션부터 시작하여 점차 복잡성을 더합니다.
• Variants 재사용: 일관성을 위해 재사용 가능한 variants를 정의합니다.
• CSS와 결합: 정적 스타일에는 CSS를 사용하고 동적 애니메이션에는 Framer Motion을 사용합니다.
• 성능 최적화: 불필요한 요소 애니메이션을 피하고 과도한 전환을 사용하지 마세요.자주 묻는 질문

결론

Framer Motion은 React 애플리케이션에서 세련된 애니메이션을 만드는 데 유용한 도구입니다.

간단한 API와 광범위한 기능을 통해 사용자 인터페이스를 향상시키려는 개발자에게 최고의 선택입니다.

오늘 Framer Motion을 사용해 실험해보고 디자인에 생동감을 불어넣으세요!