Storybook과 Headless Ui Component를 만들면서 느낀점을 쓰려고했으나 생각이 잘 정리되질 않아서 그동안 쓰질 못했다.

그럼에도 불구하고 한번 써보려고한다.

한줄로 요약하면 '좋으면서 아쉽다.'이다.

Headless Ui Component의 최대 장점은 디자인 자유도이다.

해당 컴포넌트에서 의도한 동작 로직만 존재할 뿐, 디자인 관련해선 어떠한 제한사항이 없다.

때문에 디자이너의 요구 사항을 빠르게 반영 가능하다.

이건 내가 Headless Ui Component만을 고집하는 이유다.

하지만 이 또한 다른사람이 사용하기 쉽지 않다.

Headless Ui Component를 공유하고 사용하려면 Storybook과 같은 도구의 사용은 필수다.

왜냐하면 작업자의 의도에 따라 만들어지는 컴포넌트의 갯수가 엄청 많아지기 때문이다.

이게 무슨 말이냐면, 달력 컴포넌트를 만들었다고 가정해보자.

1년전의 나라면 달력 컴포넌트를 만들 때 다음과 같은 형태로 만들 것이다.

<Calendar

:weeks=['일', '월', '화', '수', '목', '금', '토', '일']

:is-month-button=true

:is-year-button=true

:is-active-date-color=blue

:is-range=true

:is-active-range-date=skyblue

// ...

/>

지금은 기억나는대로만 적어서 위에 적은 props 갯수가 적은데, 아마 실제론 위에서 보여준 props 말고도 수십개의 props가 더 생길것이다.

그리고 해당 props에 대한 문서를 만들어야될 것이다.

그리고 이 문서 또한 storybook으로 정리할 것이다.

이번엔 Headless Ui Component 방식으로 만든 달력 컴포넌트이다.

<CalendarArea>

<CalendarInput/>

<!--날짜달력-->

<CalendarDateArea>

<CalendarPrevMonthButton>이전</CalendarPrevMonthButton>

<CalendarNextMonthButton>다음</CalendarNextMonthButton>

<CalendarDate v-for...>

</CalendarDateArea>

<!--월달력-->

<CalendarMonthArea>

</CalendarMonthArea>

<!--연달력-->

<CalendarYearArea>

</CalendarYearArea>

</CalendarArea>

위도 완전 축소해서 적은 것이다.

모든 부분을 컴포넌트화해서 만들고 위처럼 어떤 컴포넌트 내부에 위치하기만하면 해당 로직은 자동으로 주입된다. (인풋 클릭했을 때 달력이 뜬다던지 이런 로직들)

즉, 컴포넌트 갯수가 엄청 많아진다.

위와 같은 사용 방식도 문서화가 안되어있으면 쓰기 어렵다.

때문에 이를 storybook으로 정리했다.

여튼 어떤 방법을 사용하던 storybook에 정리한 문서든 뭐든 봐야된다.

그런 점이 아쉽긴하지만, 그래도 Headless Ui Component는 디자인 자유도가 높다는 엄청난 장점이 있다.

앞으로도 컴포넌트를 만들 때 무조건 Headless Ui Component 방식을 쓸것 같다.

하지만 그럼에도 불구하고 아쉬운점은 많다.

이건 다음 글에서..