Storybook

의미

💡 CDD를 지원하는 도구인 Component Explorer 등장
💡 Component Explorer의 UI 개발 도구 중의 하나
💡 각각의 컴포넌트들을 따로 볼 수 있게 해줌

특징

💡 재사용성을 확대하기 위해 컴포넌트를 문서화
💡 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있게 해 다양한 테스트 상태 확인 가능(버그 사전 예방 기능)
💡 테스트 및 개발 속도를 향상시킴
💡 어플리케이션에 의존성을 걱정하지 않고 빌드 가능

지원기능

-UI 컴포넌트를 카탈로그화
-컴포넌트 변화를 stories로 저장
-핫 모듈, 재로딩과 같은 개발 툴 경험 제공
-리엑트 등의 다양한 뷰 레이어 지원

사용예시

📗 설치

npx storybook init

📗 작성

//Text.js
import React from "react";

const Text = ({title, color}) => (
	<h1 style={{color: color}}>{title}</h1>
);

export default Text;

//Text.stories.js(stories폴더 안에)
import Text from "./Text";

export default {
	title : "A/Text",
  	component: Text,
  	argTypes: {
    	title: {control : "text"},
      	color: {control : "text"}
    }
}

const Template = (args) => <Text {...args}/>

//개별
export const BlueText = Template.bind({});
BlueText.args={
	title: "B",
  	color: "blue"
}