Storybook을 도입하자 컴포넌트가 정리됐다

요약

• 스토리북을 도입하면서 컴포넌트를 어떻게 정리하면 좋을지 생각해보았습니다.

“다른 데이터를 쓴다면 별개의 컴포넌트로 두며, 데이터가 없으면 렌더링이 안되는 컴포넌트가 아닌, 상황에 따라 다르게 보여주는 컴포넌트들을 만들자”

🐾들어가며

프로젝트 리팩토링 과정에서 비슷한 로직에 다른 컴포넌트로 사용하고 있는 것을 확인했습니다. 그래서 공통 컴포넌트를 정리하고자 하였습니다. 이 과정에서 다른 동료가 쓴 코드를 볼 수 있고, 소통할 수 있는 기회를 만들 수 있었습니다.

✨본격적으로

✅질문하기

1. 문제가 무엇인가?
해당 컴포넌트가 어디에 쓰였는지, 어떤 UI를 가지고 있는지 확인이 어렵습니다.
네이밍 규칙만 사용할 때, 피그마와 코드를 번갈아 가며 확인해야 하는 과정을 거쳐야 합니다.
컴포넌트에 필요한 데이터가 무엇인지 정확하게 파악할 필요가 있었습니다.

2. 어떻게 해결할 수 있을까?
스토리북을 도입하자.

3. 구체적인 방법을 생각해보자.
일단 제가 생각한 과정은 다음과 같습니다.

스토리북 설치 -> 기존 컴포넌트로 스토리북 연습 -> 정리가 필요한 컴포넌트 확인 -> 컴포넌트 로직 비교 -> 컴포넌트 스타일 비교 -> 커스텀 훅, css 스타일로 추상화 -> 컴포넌트 생성 -> 코드 리뷰 -> 페이지에 최종 적용

✅storybook 도입하기

1. 스토리북 시작하기

아래 사이트를 찾아보면서 설치하는 과정을 거쳤습니다.

https://storybook.js.org/docs/react/builders/vite
https://www.daleseo.com/storybook/
https://snupi.tistory.com/205

스토리북을 설치하고 나면 stories라는 폴더에 컴포넌트와 css, stories 파일들이 들어있고, 루트에 .storybook폴더에는 설정 파일들이 들어있습니다. 처음 접하다 보니, components폴더에 있는 것을 그대로 끌고 오는 게 아닌, stories 폴더에 별도로 생성해줘야 할까 걱정했습니다. 리팩토링 과정에서 필요 이상의 노력이 들어가야 할 수도 있기 때문이었습니다. 다행히 stories 폴더에 **.stories.jsx만 몰아넣고 components에서 가져오면 되었습니다.

2. 스토리북 설정하기

https://tech.youha.info/26d0fe3a-c718-4943-8276-233c64a4b023

설정하는 것도 비교적 간단하게 끝냈습니다. 스토리북이 똑똑해서 vite 환경이라는 것을 인지하고 해당 환경에 맞게 프리셋을 해줬고, 글로벌 스타일을 추가하고, 피그마 링크와 연결할 수 있게 designs라는 addon을 추가로 설치했습니다.

3. 스토리북에 컴포넌트 구현하기

• 문제

버튼 같은 경우는 별도의 데이터 없이 하드코딩으로 구현이 되는데, 문제는 api를 통해서 데이터를 가져와야 하는 컴포넌트들이었습니다.

• 현재 상황

불러오는 데이터가 다르기 때문에 같은 디자인에 다른 컴포넌트로 만들어서 사용하였습니다. 처음에는 같은 UI를 가진 경우 좀 더 추상화하여 컴포넌트를 쓸 수 있지 않을까 했습니다. 또한, 단축 평가로 데이터가 있을 때 컴포넌트가 렌더링되게 하는 코드로 작성을 해놓았던 터라, 데이터가 없는 상황에서는 콘솔에 에러가 찍히면서 아무것도 보이지 않는 상태였습니다.

열심히 검색을 해보던 중,

비슷하게 생겼다고 무조건 재사용하지 말고, 데이터 스키마를 확인하여 다른 모델을 적용하는 경우 별도의 컴포넌트로 두는 게 좋다.

라는 말을 보았는데, 유지보수 측면에서 데이터가 달라지면 또 UI를 분리하는 작업이 있을 수 있고 많은 예외 사항이 생기기 때문이었습니다.

• 목표 재설정

따라서 “불러오는 데이터가 달라도 같은 UI라면 컴포넌트를 정리하자” 였다면, “다른 데이터를 쓴다면 별개의 컴포넌트로 두며, 데이터가 없으면 렌더링이 안되는 컴포넌트가 아닌, 상황에 따라 다르게 보여주는 컴포넌트들을 만들자” 라고 다시 목표를 설정했습니다.

• 해결 방법

이를 위해서 Suspense와 Await를 도입하여 컴포넌트의 프라미스 결과를 통해 상황에 따라 다르게 보여줄 수 있도록 하는 게 좋다고 생각했습니다. 그래서 일단 지금은 정확한 상황에 대해 정의해보고 컴포넌트 정리를 마저 해보도록 하려 합니다.

• 데이터를 불러온다.
  => 로딩 중 : 필요한 데이터를 불러오고 있어요 / 서버와 연결을 다시 시도해야 해요.
• 데이터가 있다.
  => 렌더링: 불러오기 성공! / 불러오기 실패ㅠㅠ
• 데이터가 없다.
  => 렌더링: 데이터가 없어요

또한, 로직을 분리할 필요가 있었습니다. 스토리북 자체에서 훅을 사용할 수 없어서도 있지만, 반복적인 로직이 많이 보였습니다. 클릭하면 어디로 이동시키는 건 컴포넌트마다 사용하고 있었습니다.

그리고 스타일도 분리하려고 합니다. 담당한 파트가 대부분 ul안에 li를 map으로 생성하고 있었는데, ul을 어디에서 감싸고 있는지도 차이가 있었고, 기본적인 폰트 크기, 이미지 크기 등은 같은데, 다른 컴포넌트이기 때문에 또 다시 스타일을 만들어서 사용하고 있었습니다.

그래서 하나의 파일 안에 스타일, 로직, 컴포넌트가 같이 있는 형태에서 로직은 커스텀 훅으로, 스타일은 해당 컴포넌트의 같은 경로에 위치할 수 있게 변경할 예정입니다.

✔️결론

스토리북을 도입하면서 컴포넌트를 어떻게 정리할 지에 대해서 더 많이 찾아본 것 같습니다. 스토리북 자체에 대한 설명이기 보단, 도입 과정에 대한 글을 적었는데, 스토리북에 대한 사용 방법도 정리해서 동료들에게 공유해야겠습니다.
이 글은 옵시디언을 통해 발행하였습니다.