headlessUI ??
최근 포스팅을 하면서 React 가 Class 기반으로 쓰였던 시절부터 쓰인 Component Pattern 에 대해서 알게 되고, 이후 Hook 과 함께 사용되는 패턴은 어떻게 사용해야 할지 궁금함이 생겨 최근 2-3일간 React 와 관련된 아티클과 발표영상들을 찾아봤다.
Contaier / Presentational Component Pattern 에서 Hook 으로 넘어왔으니, 컴포넌트의 로직은 모두 Hook 으로 관리해야하는건가? 라는 궁금함에 있어서 간단한 컴포넌트들을 만들어보면서 모든 로직을 hook 으로 분리하기에는 아래와 같은 애로사항이 있었다.
1. 도메인의 성격을 가지게 되어 범용적으로 쓰이기 어려워질 수 있음
2. 도메인을 걷어내도 여러군데에 쓰이지 않고 하나의 컴포넌트에서만 쓰일 수 있음
1번의 대안으로 2번을 사용해도, 생산성의 측면에서 불합리한 선택이라고 생각할 수 있지만
역할의 분리의 면에서 생각해 보았을 때에는 분리하는게 맞다는 생각이 들었다.
그렇다면 hook 으로만 모든 로직을 대변하여 사용할 수 있을까?
headlessUI 는 스타일은 위임하며 상태와 상태를 제어할 수 있는 인터페이스를 제공한다
스타일링을 위한 코드와 비즈니스로직을 다루는 코드를 분리하기에 좋은 수단이라고 생각이 들었다.
비즈니스로직은 거의 변하지 않지만, 스타일링은 변할 가능성이 많기때문에, 이를 잘 분리한다면 변경에 취약하지 않은 컴포넌트를 만들 수 있을거란 생각이 들었다.
이전에 @mui/material 를 사용한 적이 있었는데, mui 내부에서는 base 라는 컴포넌트들과 material 이라는 컴포넌트로 나뉜다.
base 는 여기서 headless UI 를 의미하며, material 은 base + styled 로 사용되는 것을 확인하고서 headless UI 가 어떻게 쓰여지는 것인지에 대해서 감을 잡을 수 있었던 것 같다.
이후 headless UI 라는 것을 styled components 와 함께 사용할 때에는 어떻게 해야할 지 고민이다.
만약 compound component 를 통해 headlessUI 를 제공한다면, inline style 이나 class 을 통해 스타일을 편하게 지정하긴 할텐데, ( headlessui 라이브러리는 tailwind 와 함께 쓰이고 있다 )
참고
- https://www.youtube.com/watch?v=fR8tsJ2r7Eg&ab_channel=%ED%86%A0%EC%8A%A4
- https://jbee.io/react/headless-concept/
- https://so-so.dev/react/make-select/
