Headless 컴포넌트

UI 없이 로직만 제공하는 컴포넌트 패턴이다.

What is Headless Component

UI 렌더링 없이 상태와 로직만 제공하는 컴포넌트다.

사용하는 측에서 자신만의 UI를 자유롭게 구성할 수 있다.

왜 필요할까

문제: 기존 UI 라이브러리

• 스타일이 고정되어 있다
• 커스터마이징이 어렵다
• 디자인 시스템과 충돌

해결: Headless 패턴

• 로직만 제공, UI는 사용자가 결정
• 완전한 스타일 자유도
• 접근성(a11y)은 내장

대표 라이브러리

• Headless UI (Tailwind Labs)
• Radix UI
• React Aria (Adobe)
• Downshift

예시

// Headless Dropdown 사용
<Menu>
  <Menu.Button>옵션</Menu.Button>
  <Menu.Items>
    <Menu.Item>{({ active }) => (
      <button className={active ? 'bg-blue-500' : ''}>
        편집
      </button>
    )}</Menu.Item>
  </Menu.Items>
</Menu>

왜 이렇게 할까: 로직(열림/닫힘, 키보드 네비게이션)은 라이브러리가 처리하고, UI는 내가 원하는 대로 만들 수 있다.

---