🎨 UI 컴포넌트 모음

다양한 방식으로 구현한 React 컴포넌트들을 확인해보세요.

📚 학습 내용

React vs Vanilla JS

아코디언, 탭메뉴, 툴팁 등을 React Hooks와 순수 DOM 조작으로 각각 구현

최신 기술 스택

TypeScript로 타입 안전성 확보, Next.js 14 App Router 활용

고급 패턴

Compound Components, Render Props, Custom Hooks 등 고급 React 패턴 학습

성능 & 접근성

Intersection Observer, Lazy Loading, ARIA 속성으로 최적화

🛠️ 사용 기술

VE

Vanilla Extract

타입 안전한 CSS-in-JS

TW

Tailwind CSS

유틸리티 기반 스타일링

VT

Vitest

Vite 기반 초고속 테스트 러너 (Jest 대체)

TL

Testing Library

React 컴포넌트 테스트 유틸리티 (render, screen, fireEvent)

📖 구현된 컴포넌트

기본 UI 요소

  • • 아코디언 (6가지 방법)
  • • 탭메뉴 (4가지 방법)
  • • 툴팁 (6가지 방법)
  • • 반응형 텍스트박스
  • • 여러줄 말줄임
  • • 지연 로딩
  • • 무한 스크롤

고급 UI 요소

  • • 횡 스크롤 박스
  • • 스크롤 스파이
  • • 스낵바
  • • 모달
  • • 팝오버
  • • 이미지 슬라이드
  • • 캐러셀

🎯 구현 방법

React 방식

  • • 조건부 렌더링 - 상태에 따른 DOM 관리
  • • CSS Display - 간단한 상태 전환
  • • CSS 애니메이션 - 부드러운 전환 효과
  • • HTML Radio - CSS만으로 상태 관리
  • • 검색 기능 - 동적 필터링
  • • 다중 선택 - 복잡한 상호작용

Vanilla JS 방식

  • • DOM 조작 - 직접적인 요소 제어
  • • 이벤트 리스너 - 사용자 상호작용 처리
  • • Intersection Observer - 스크롤 감지
  • • CSS 클래스 토글 - 상태 변경
  • • 데이터 페칭 - 비동기 처리
  • • 성능 최적화 - 메모리 효율성