Framer Motion 사용에 대한 초보자 가이드
Lukas Schneider
DevOps Engineer · Leapcell

Framer Motion은 React용으로 널리 사용되는 애니메이션 라이브러리로, 개발자가 최소한의 노력으로 유동적이고 시각적으로 매력적인 애니메이션을 만들 수 있도록 설계되었습니다. 세련된 사용자 인터페이스를 구축하든 동적인 웹 경험을 구축하든 Framer Motion은 애니메이션을 쉽고 우아하게 만들 수 있는 강력한 도구를 제공합니다. 이 가이드에서는 코드 예제 및 모범 사례와 함께 Framer Motion 사용의 기본 사항을 안내합니다.
Key Takeaways
- Framer Motion은 직관적인 API와 강력한 기능으로 React 애니메이션을 단순화합니다.
- 주요 도구로는 애니메이션 상태 관리를 위한
motion
컴포넌트,AnimatePresence
및variants
가 있습니다. - 모범 사례에는 간단하게 시작하고, variants를 재사용하고, 성능을 최적화하는 것이 포함됩니다.
Framer Motion이란 무엇입니까?
Framer Motion은 React 애플리케이션에서 애니메이션을 단순화하는 선언적 라이브러리입니다. 다음을 제공합니다.
- 사용 편의성: 직관적인 구문 및 API.
- 유연성: 간단하고 복잡한 애니메이션을 모두 지원합니다.
- 성능: 부드러운 전환에 최적화되었습니다.
- 접근성: 사용자를 위한 움직임 감소 기본 설정을 처리합니다.
설치
시작하려면 npm 또는 yarn을 통해 Framer Motion을 설치합니다.
npm install framer-motion # 또는 yarn add framer-motion
핵심 개념
Framer Motion은 몇 가지 핵심 컴포넌트와 훅을 중심으로 구축되었습니다. 다음은 필수 사항입니다.
- motion 컴포넌트: 표준 HTML 요소를
motion
컴포넌트로 바꿔서 애니메이션을 적용합니다. - AnimatePresence: 마운트 및 언마운트 애니메이션을 처리합니다.
- useAnimation: 애니메이션에 대한 프로그래밍 방식 제어를 제공합니다.
- Variants: 재사용 가능한 애니메이션 상태를 정의합니다.
기본 애니메이션
다음은 상자에 애니메이션을 적용하는 간단한 예입니다.
import React from 'react'; import { motion } from 'framer-motion'; const App = () => { return ( <motion.div style={{ width: 100, height: 100, backgroundColor: 'blue' }} animate={{ x: 200 }} transition={{ duration: 0.5 }} /> ); }; export default App;
이 예에서:
motion.div
는 애니메이션된div
를 만드는 데 사용됩니다.animate
props는 대상 애니메이션 상태를 지정합니다.transition
props는 애니메이션 기간을 제어합니다.
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
props는 사용할 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)}>Toggle</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을 사용합니다.
- 성능 최적화: 불필요한 요소를 애니메이션하거나 과도한 전환을 사용하지 마십시오.
FAQs
npm install framer-motion
또는 yarn add framer-motion
을 사용합니다.
DOM에 들어가고 나가는 요소에 대한 애니메이션을 처리합니다.
예, 정적 스타일에는 CSS를 사용하고 동적 애니메이션에는 Framer Motion을 사용합니다.
결론
Framer Motion은 React 애플리케이션에서 세련된 애니메이션을 만드는 데 유용한 강력한 도구입니다. 간단한 API와 광범위한 기능을 통해 사용자 인터페이스를 향상시키려는 개발자에게 훌륭한 선택입니다. 지금 Framer Motion으로 실험을 시작하여 디자인에 생기를 불어넣으세요!
Leapcell은 Node.js 프로젝트를 클라우드에 배포하기 위한 최고의 선택입니다.
Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.
다국어 지원
- Node.js, Python, Go 또는 Rust로 개발합니다.
무료로 무제한 프로젝트 배포
- 사용량에 대해서만 비용을 지불합니다. 요청 없음, 요금 없음.
탁월한 비용 효율성
- 유휴 요금 없이 사용한 만큼 지불합니다.
- 예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.
간소화된 개발자 경험
- 간편한 설정을 위한 직관적인 UI.
- 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
- 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.
손쉬운 확장성 및 고성능
- 자동 확장을 통해 높은 동시성을 쉽게 처리합니다.
- 운영 오버헤드가 없어 구축에만 집중할 수 있습니다.
설명서에서 자세히 알아보세요!
X에서 팔로우하세요: @LeapcellHQ