데브허브 | DEVHUB | Gorgeous Breadcrumb Animation in React | TutorialGorgeous Breadcrumb Animation in React | Tutorial
- React, Next.js 등 다양한 JS 프레임워크에서 URL 경로를 추적하여 동적으로 생성되는 애니메이션 브레드크럼 내비게이션 구현 방법을 다룹니다. 🗺️
- 기본 UI는 Shadcn/ui의 브레드크럼 컴포넌트를 활용하고, 모든 애니메이션은 Framer Motion 라이브러리(특히
motion, LayoutGroup, AnimatePresence)를 사용하여 구현됩니다. ⚙️
useLocation 훅을 통해 현재 URL 경로(pathname)를 감지하고, 특정 경로(e.g., /courses)에서만 브레드크럼이 렌더링되도록 조건부 로직을 적용합니다. 🧭buildBreadcrumbs 함수를 사용하여 URL 경로를 파싱하고, 각 세그먼트(레이블, Href, 파라미터, 활성 상태)를 정의하는 객체 배열을 생성하여 브레드크럼 데이터를 구조화합니다. 🧩- Shadcn/ui 컴포넌트에
HTMLMotionProps를 전달하여 Framer Motion의 애니메이션 속성(initial, animate, exit, layout)을 적용하고, motion을 m으로 단축하여 사용합니다. ✨
LayoutGroup으로 전체 브레드크럼 리스트의 레이아웃 변화를 부드럽게 처리하고, AnimatePresence를 사용하여 각 브레드크럼 아이템의 등장(fade-in) 및 퇴장(fade-out) 애니메이션을 구현합니다. 🔄AnimatePresence의 initial={false} 속성으로 페이지 로드 시 초기 애니메이션을 비활성화하여 부자연스러운 팝업을 방지하고, 각 아이템에 opacity 및 x축 이동 애니메이션을 적용하여 시각적 효과를 높입니다. 🎞️
inline-flex와 items-center로 요소들을 정렬하고, 현재 활성화된 브레드크럼 아이템의 텍스트 색상을 text-foreground로 변경하여 시각적으로 강조합니다. 🖌️
![[강의 미리보기] AWS로 웹 서비스 시작하기(4)](https://i3.ytimg.com/vi/Zx1k6xOYI5M/hqdefault.jpg)
