storybook 파악하기

 

배경

이번에 회사에서 리액트로 리팩토링을 하게 되는데 컴포넌트를 편리하게 관리할 수 있는 방법이 있을까 고민하다 스토리북을 알게 되었다. 

 

스토리북?🤔

공식홈페이지(https://storybook.js.org/)를 들어가서 쭉 읽어보니 

스토리북을 사용하면 아래와 같은 장점들이 있다고 소개 된다! (두구두구)

 

📝 Develop UIs that are more durable

Isolate components and pages and track their use cases as stories. Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device features, etc.

 

-> 컴포넌트를 독립적으로 개발 할 수 있다고 한다 심지어 api, context 같은 것들도 사용하는 것이 가능하다고 한다. 

 

✅ Test UIs with less effort and no flakes

Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated Accessibility, Interaction, and Visual testing. Or use stories as test cases by importing them into other JavaScript testing tools.

 

-> 테스팅 용도로 사용 할 수 있다. ( 테스팅 용도를 위해 내장된 기능이 (사용자 interaction 같은 것들 ) 많다고 한다. )

 

📚 Document UI for your team to reuse

Storybook is the single source of truth for your UI. Stories index all your components and their various states, making it easy for your team to find and reuse existing UI patterns. Storybook also auto-generates documentation from those stories.

  

 -> 문서화가 되어 UI 팀과의 공유가 쉬어진다. ( 개인적으로 이 기능이 진짜 좋은 것 같다. ) 

 

📤 Share how the UI actually works

Stories show how UIs actually work, not just a picture of how they're supposed to work. That keeps everyone aligned on what's currently in production. Publish Storybook to get sign-off from teammates. Or embed them in wikis, Markdown, and Figma to streamline collaboration.

 

-> 마크다운, 위키, 피그마랑 연동이 된다!! 내상각에는 이 기능은 코드로 만든 컴포넌트들의 작동방식이 적용된 UI가 피그마로 연동하면 그 동작이 그대로 적용된 figma 컴포넌트가 생길 것 같다..!

 

🚦Automate UI workflows

Storybook is compatible with your continuous integration workflow. Add it as a CI step to automate user interface testing, review implementation with teammates, and get signoff from stakeholders

 

-> CI(contiuous intergration )이 된다. 대충 스토리북 작업물을 지속적으로 업데이트 할 수 있다는 뜻이다.

 

직접 깔아봤다!?😎

백문이 불여일견이라 하지 않았나?! 직접 깔아보았다!! ( 공식문서 install 참고 했다. )

npx storybook@latest init

처음에 install 하는데 경로는 그 프로젝트 바로 아래에서 하면 된다. (src와 동일 선상) 그렇다고 리액트만 되는 건 아니다. vue, angular도 역시 사용할 수 있다. 

 

명령어 치면 추가로 권장하는 것들이 있는데 설치하겠냐고 물어보는데 내용을 파악해봤는데 나쁘지 않을 것 같아서 모두 yse하고 설치했다. 그러니 아래와 같은 것들이 생기는데 stories에서 component 관리 하면 된다.  

일단 기본적으로 생성된 파일을 가지고 한번 구동 시켜 보고( npm run storybook ) 생성된 결과물과 코드를 비교해보니 아래 코드와 스크린샷에서 알 수 있듯이 component가 가질 수 있는 props 들이 자동 생성되고 그 props들의 case 별 ui가 어떻게 나타나는지 확인 할 수 있었다. 

 

그래서 써야 될까?🤔

음 아직 프로젝트에서 직접 사용해보진 않았지만 디자인 시스템이 있고 디자인 또는 UI팀과의 협업이 필요하다면 스토리북은 쓰는게 무조건 좋을 것 같다는 결론에 이르렀다.

 

사실 내가 우려한 부분은 스토리북을 사용하게 되면 얻게되는 이점보다 추가적으로 필요한 작업량이 더 클까봐 였다. 그런데 깔아보고 코드를 보아하니 작업량이 크게 늘거 같지 않았다. 그리고 작업량이 크게 는다고 하더라도 재사용성이 높은 컴포넌트들만 스토리북을 통해 문서화 하고 일회성 컴포넌트는 일단 문서화를 제외하는 방식으로 사용하면 될 것 같다.

 

이상 긴글 읽어주셨다면 감사합니다~!

여러분의 댓글이 저에게 힘이돼요😊