스크롤박스 컴포넌트

가로 스크롤과 네비게이션 버튼을 활용한 이미지 갤러리 구현

React 방식 Intersection Observer

핵심:Intersection Observer + React Hooks - React의 상태 관리와 Intersection Observer를 결합하여 스마트한 네비게이션 버튼 제어

✅ 장점: 선언적 상태 관리, 컴포넌트 재사용성, 자동 메모리 정리, 타입 안전성, 개발자 경험 우수

❌ 단점: 번들 크기 증가, 런타임 오버헤드, 학습 곡선, 복잡한 상태 관리

💡 사용 시나리오: React 기반 프로젝트, 복잡한 상태 관리가 필요한 경우, 팀 개발 환경

🔧 동작 방식:useIntersectionObserverV2 훅으로 스크롤 경계를 감지하고, useState로 네비게이션 버튼 상태를 관리하며,useCallback으로 스크롤 함수 최적화

  • 현대적인 회의실
  • 밝은 사무실 공간
  • 미니멀한 디자인
  • 자연광이 풍부한 공간
  • 현대적인 인테리어
  • 깔끔한 사무 환경
  • 전문적인 분위기
  • 효율적인 공간 활용
  • 모던한 디자인
  • 편안한 업무 환경
  • 세련된 인테리어
  • 조용한 회의 공간
  • 창의적인 작업 환경
  • 집중할 수 있는 공간
  • 프로페셔널한 분위기
  • 효율적인 레이아웃
  • 현대적인 사무실
  • 깔끔한 디자인
  • 전문적인 환경
  • 편안한 업무 공간

Vanilla JS 방식 DOM 조작

핵심: 순수 JavaScript + DOM API - 프레임워크 없이 순수 JavaScript로 직접 DOM을 조작하여 스크롤박스 구현

✅ 장점: 가벼운 번들 크기, 빠른 실행 속도, 프레임워크 의존성 없음, 직접적인 DOM 제어, 높은 성능

❌ 단점: 수동 DOM 관리, 메모리 누수 위험, 코드 재사용성 낮음, 유지보수 어려움

💡 사용 시나리오: 가벼운 웹사이트, 성능이 중요한 프로젝트, 프레임워크 사용 불가능한 환경

🔧 동작 방식: IntersectionObserverAPI로 스크롤 경계를 감지하고, classList로 네비게이션 버튼 상태를 제어하며, scrollIntoView로 부드러운 스크롤 이동 구현

⚡Vanilla JS ScrollBox