[React] headless UI components 란

headless ui components

목적

• 로직과 룩&필 을 분리하자.

TL;DR

• UI가 내포하고 있는 상태를 분리한다.
• 적절한 자료구조를 정의하고
• 이를 변경할 수 있는 인터페이스를 노출
• 커스텀 훅으로 만든다.

eg) 달력 컴포넌트

• 문제점 : 달력 라이브러리는 CSS가 내장되어 있어서
• 기존 CSS override시 발생되는 문제점이 있다.

1. 오버라이드한 class가 다른 class로 변경되면 override한 스타일이 제대로 동작하지 않는다.
2. 오버라이드한 스타일이 내부적으로 override 할 수 없게 되는 케이스가 발생한다. (우선순위 이슈)
3. CSS in JS 방식으로 애플리케이션을 스타일링 하고 있다면 postcss라도 설치해서 css를 별도로 컴파일해줘야 한다.
4. 리소스는 한정적인데, 처음부터 만든느 것 보다 손이 많이 가는 작업이다.
5. 위와 같은 이슈로 관리가 안 된다.

• 어떻게 추상화를 할까?

1. 달력의 UI를 Table 엘리먼트로 구성할 수 있다. 
(HTML 요소로 추상화)
2.Table Body에서 렌더링되는 데이터는 보여지는 데이터(날짜)는 2x2 배열이라고 할 수 있다. 
(데이터 자료구조 추상화)

* 월(Month) 값 고려
3. 달력은 ‘현재 보여지고 있는 월(Month)‘라는 값을 상태로 가지고 있다. 
(상태 추상화)
4. 이 ‘현재 보여지고 있는 월(Month)‘을 제어할 수 있다.
(인터페이스 추상화)

ref