headless 컴포넌트 도입

회사에서 material-ui를 사용하였습니다.
그 이유와 왜 지금은 사용하지 않는 지?
그리고 어떻게 하다 headless 컴포넌트를 도입하게 되었는 지 적어보려고 합니다.

headless에 대한 설명은 따로 없습니다.

material-ui를 사용한 이유

• 실력 부족
• 시간 부족

프로젝트 초창기에는 material-ui를 사용하여 개발을 했었습니다.
팀원들은 웹 개발하던 사람들이 아니었어서 react는 물론 css도 처음 접하는 사람들이었습니다.
따라서 그 당시 유명한 material-ui를 이용하여 빠르게 구현을 하였습니다.

material-ui를 벗어난 이유

• 커스텀 하기 어려움
• 자체적으로 구현하고 싶은 욕망

프로젝트 기획, 디자인이 고도화 되며 컴포넌트를 커스텀하게 변경해야하는 필요가 생겼습니다.
이것은 매우 불편하고 어느 정도의 한계가 분명하다고 생각이 들었습니다.

지금은 mui에서 style이 없는 컴포넌트를 제공해주는 것 같으나
그 당시만 해도 className을 이용하여 변경을 해주어야 했습니다.

팀원들의 실력도 성장하였고 자체적인 컴포넌트를 구현하고 싶은 욕구들이 생겨 하나씩 바꾸어 나갔습니다.

material-ui를 벗어나서 생긴 불편함

• 시간이 많이 듬
• 완성도 있게 구현하기가 생각보다 어려움
• 코드가 복잡해짐

당연히 하나 하나씩 구현을 하려고 하니 힘들었습니다.
시간도 많이 들고 생각하지 않아도 되는 로직을 생각하는게 힘들었지만, 미션을 깨는 듯한 재미가 있어 개발 자체는 재미있었습니다. 구현을 하면 할수록 material-ui 개발자들이 대단하다고 느껴졌습니다.

그러나 위 문제는 별 게 아니었습니다.
어떠한 이유 때문에 디자인이 변경되면 수정하기가 힘든 경우가 있었습니다.
대부분의 경우는 쉽게 가능했지만 Select, Table 처럼 복잡한 컴포넌트의 경우 힘이 들었습니다.

그 이유를 확인해보니 하나의 컴포넌트를 완성형으로 만들고 그 안에 많은 로직이 들어가 있었습니다.
예를들어 type에 따라서 동작이 single, multiple, groupSingle, groupMultiple 과 같이 독립된 동작을 구현해야했습니다.

<Select type="single" list={[]} />
<Select type="multiple" list={[]} />
<Select type="groupSingle" list={[]} />
<Select type="groupMultiple" list={[]} />

위처럼 1개의 컴포넌트를 4개의 컴포넌트처럼 사용을 하였습니다. 위 4개를 하나의 컴포넌트에서 동작이 가능하도록 하니 복잡도가 높아졌고 수정 시 코드를 확인할 때 어려움이 있었습니다.
또 수정할 떄 외부의 코드는 최대한 변경 없이 구현하려고 하니 더 복잡했습니다.

이때 우연찮게 headless 컴포넌트에 대해 알게됩니다.

headless 컴포넌트

처음에는 무슨 말인지 정확히 이해가 가지 않았습니다.
그리고 우연히 개발 중 저희 코드를 보니 headless 컴포넌트로 구현했으면 이러한 문제가 없었겠구나 라는 생각을 하게되었습니다.

간단하게 설명하면 아래와 같습니다.

<Select>
  <SelectItem></SelectItem>
  <SelectItem></SelectItem>
  <SelectItem></SelectItem>
</Select>

Select, SelectItem 컴포넌트를 조합해서 내가 원하는 타입의 Select 컴포넌트를 구현하면 됩니다.
다시 말하면 위 조합으로 직접 single, multiple, groupSingle, groupMultiple 을 구현하여 사용하면 됩니다.
추가로 위 4가지 타입이 아닌 다른 Select 컴포넌트가 필요하더라도 쉽게 구현할 수 있습니다.
디자인이 바뀌어도 쉽게 css를 수정할 수 있습니다.

모든 컴포넌트는 아니지만 위처럼 변경 발생하면 수정하기 어렵거나,
코드 복잡도가 높은 컴포넌트를 headless 컴포넌트로 변경하였습니다.

위에서 언급했듯이 모든 컴포넌트가 아닌 특정 컴포넌트만 headless로 변경하였습니다.
상황에 맞게 구현하면 좋을 것 같습니다.

제 글을 보면 뭐가 좋은 지 이해가 안되실 것 같아 보았던 유튜브 링크를 첨부했습니다.
해당 영상을 보아도 저처럼 뭐가 좋은 지 이해가 안되실 수 있는데 그럼 일단 넘어가시면 됩니다.
언젠간 필요하게 될 때 다시 보시면 좋을 것 같습니다.

참고문헌

• toss