Storybook은 Inpa님 글이 없네요… 신기하네용 ㅎㅎ

<aside> ✏️

목차

</aside>

🍀 Storybook 이란?

컴포넌트의 다양한 경우를 정리할 수 있도록 도와주는 시각화 도구(tool)

예를 들어, 버튼 컴포넌트가 있으면 상태(데이터)에 따라서 UI나 액션이 달라질 수 있다.

variant 값이 primary 이면 일반버튼, dashed 이면 점선이 있는 버튼으로 버튼 UI를 표현할 수 있다.

점점 늘어나는 컴포넌트들을 한눈에 정리하기 힘들때,

스토리북은 이런 컴포넌트들을 시각적으로 정리 + 구현 코드를 문서화

디자이너와 협업할때 컴포넌트의 UI가 잘 구현되었는지 피드백을 받을 수 있으며,

다른 개발자와 협업할 때는 컴포넌트를 어떻게 구현했는지 + 사용방법을 스토리북을 통해 보여줄 수 있다.

아토믹 디자인 패턴을 사용한다면 스토리북은 더 강력한 툴이 될 수 있다.

파일명 컨벤션: <컴포넌트명>.stories.tsx