Headless Component

개념

기능은 있지만 스타일이 없는 컴포넌트

 

도입이 필요한 이유

기능과 스타일이 공존한 컴포넌트는 재사용하기가 어렵다.
기능 추가하려니 스타일이 깨지고, 스타일을 추가하려다보니 기존 UI에 side-effect가 생긴다.
그래서 비슷한 컴포넌트를 계속 만들게 되는데.. 이는 변경이 빈번하는 프로젝트에서는 적합하지 않다.
컴포넌트를 기능만 담당하는 것만 하나 만들어서 각자 다른 스타일을 입혀 재사용이 가능한 컴포넌트를 만드는것이 좋겠다.

 

How

인터페이스 먼저 고민하기

의도가 무엇인가?
이 컴포넌트의 기능은 무엇인가?
어떻게 표현되어야 하는가?

 

분리하기

복잡도를 낮추는가?
재사용 가능한 컴포넌트가 만들어지는가?

 

구현

custom hook

context

 

Headless UI Library

https://headlessui.com/
https://www.radix-ui.com/
https://github.com/reach/reach-ui

 

참고

https://youtu.be/fR8tsJ2r7Eg
https://youtu.be/aAs36UeLnTg
https://www.howdy-mj.me/design/headless-components