Headless UI란?
일반적으로 사용되는 UI 라이브러리들은 각자 사전 정의된 스타일을 가지고 있어, 실제 개발 시 원하는 디자인과 미묘한 차이가 발생할 수 있습니다. Headless UI는 스타일이 없는 접근성 중심의 컴포넌트를 제공함으로써 개발자가 스타일링에 대한 완전한 제어권을 가지도록 돕는 라이브러리입니다. 이를 통해 UI의 복잡한 기능 구현에 집중하면서도, 디자인에 유연성을 더할 수 있습니다.
간단히 말해, Headless UI는 스타일 없이 뼈대만 제공하는 UI 컴포넌트로, 개발자가 프로젝트에 맞는 커스터마이징이 가능하도록 지원합니다.
주요 특징:
- 스타일 없는 컴포넌트: Headless UI는 기본적인 CSS 스타일을 제공하지 않아 원하는 대로 커스터마이징이 가능합니다. 예를 들어, TailwindCSS, SCSS, CSS를 이용해 개발자가 자유롭게 스타일을 정할 수 있습니다.
- 접근성 고려: 웹 접근성 표준을 준수한 컴포넌트를 제공합니다. 이를 통해 시각 장애인, 키보드 사용자 등 모든 사용자가 웹을 쉽게 사용할 수 있도록 설계되어 있습니다.
- 로직과 동작만 제공: 버튼, 모달, 드롭다운 같은 컴포넌트의 기능적인 동작과 상호작용을 위한 로직만 제공됩니다. 디자인은 전적으로 개발자의 몫이며, 각 프로젝트의 디자인 요구사항에 맞춰 유연하게 적용할 수 있습니다.
Headless UI 라이브러리
Headless UI:
Headless UI는 TailwindCSS와 함께 사용할 수 있도록 개발된 라이브러리입니다. TailwindCSS를 자주 사용한다면 한 번쯤 사용해보기 좋은 라이브러리입니다.
주어진 뼈대에 TailwindCSS를 사용하여 스타일을 입힐 수 있습니다.
Radix UI:
Radix UI 라이브러리 문서내 Primitives 에서는 아래와 같이 정의하고 있습니다.
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
접근성, 개발자 경험 그리고 커스터마이징에 집중이 되어 있는 UI 컴포넌트 라이브러리이며 나만의 디자인 시스템을 만드는데 유용하다 라고 합니다.
Headless UI 보다 더 많은 컴포넌트들을 제공하고 있으며 개발하는데 필요한 대부분의 컴포넌트들은 다 있다고 생각해도 무방합니다.
구현 패턴
Headless UI는 Compound Component 패턴, Function as Children 패턴, 그리고 Custom Hook 등을 통해 구성됩니다.
- Compound Component
- 같이 사용되는 컴포넌트들이 state를 공유할 수 있게 해줍니다. 상태 공유를 위해 context를 사용하게 됩니다.
- Function as Children component
- 자식에 어떤 것이 들어올지 예상 할 수 없기 때문에 children을 그대로 노출시켜줍니다.
- Custom Hook
- 가장 간단하고 직관적인 방법이지만 state가 사용해야 되는 컴포넌트가 아닌 다른 컴포넌트 내에서 사용될 가능성이 있습니다.
이러한 패턴들은 프로젝트의 요구사항에 따라 적절히 선택하여 활용할 수 있으며, Headless UI 사용 시 유연하고 재사용 가능한 컴포넌트를 만드는 데에 큰 도움이 됩니다.
결론
결론적으로, Headless UI는 개발자가 컴포넌트를 구현하는데 있어 높은 자유도와 유연성을 제공하면서도 접근성과 기능성을 보장합니다. 관심사의 분리를 통해 스타일과 로직을 각각 따로 관리하여 재사용 가능한 컴포넌트를 만들 수 있도록 지원하며 이를 통해 프로젝트를 유지보수 하는데 있어 좀 더 유연한 구조를 가져 갈 수 있도록 해준다고 생각합니다. 여러 예제들이 어떤식으로 작성 및 관리가 되고 있는지 참고하면 이해하는데 좀 더 좋지 않을까 싶습니다.