Next.js에서 Framer Motion 애니메이션을 위한 재사용 가능한 MotionDiv 컴포넌트 만들기

핵심 기술

Next.js 환경에서 Framer Motion 라이브러리를 활용하여 애니메이션을 구현할 때, 반복적인 코드를 줄이고 일관성을 확보하기 위한 재사용 가능한 MotionDiv 컴포넌트의 생성 및 활용 방법을 다룹니다.

기술적 세부사항

• 프로젝트 설정: Next.js 프로젝트에 Framer Motion 라이브러리를 설치합니다 (npm install motion).
• 컴포넌트 생성: components/ui/MotionDiv.tsx 파일에 use client 지시어와 함께 MotionDiv 컴포넌트를 정의합니다.
• TypeScript 지원: MotionDivProps 인터페이스는 Framer Motion의 HTMLMotionProps<'div'>를 확장하여 motion.div가 지원하는 모든 Prop (className, 애니메이션 Prop, 이벤트 핸들러 등)을 포함합니다.
• 컴포넌트 구현: MotionDiv는 children과 className을 받고, 나머지 motionProps를 motion.div에 전달하는 래퍼(wrapper) 컴포넌트 역할을 합니다.
• className 병합: cn 유틸리티 함수를 사용하여 Tailwind CSS 등과 함께 className을 효과적으로 병합합니다.
• 활용 예시: initial, animate, transition, whileHover, whileTap 등 Framer Motion의 다양한 애니메이션 Prop을 MotionDiv에 직접 적용하는 예시를 제공합니다.
• Next.js App Router: App Router 환경에서 클라이언트 컴포넌트로 동작하기 위해 'use client' 지시어를 사용합니다.
• 확장 가능성: 애니메이션 프리셋, 기본값 설정, 조건부 애니메이션, 스태거(stagger) 지원 등 향후 MotionDiv를 확장할 수 있는 아이디어를 제시합니다.

개발 임팩트

• 생산성 향상: 동일한 motion.div 코드를 반복적으로 작성하는 대신, MotionDiv 컴포넌트 하나로 간결하게 애니메이션을 적용하여 개발 시간을 단축합니다.
• 일관성 유지: 프로젝트 전반에 걸쳐 통일된 애니메이션 패턴을 적용하여 UI/UX의 일관성을 높입니다.
• 유지보수 용이성: 애니메이션 관련 로직을 중앙 집중식으로 관리하여 변경 및 수정이 용이합니다.
• 강력한 TypeScript 지원: 자동 완성 및 타입 검사를 통해 애니메이션 Prop 작성 시 오류를 사전에 방지합니다.

커뮤니티 반응

(원문에서 커뮤니티 반응에 대한 구체적인 언급은 없습니다.)

톤앤매너

Next.js와 Framer Motion을 사용하는 개발자를 대상으로 하며, 실질적인 코드 구현과 이점을 명확히 설명하는 전문적이고 실용적인 톤을 유지합니다.