❤️🔥 Storybook
- omponent Explorer의UI 개발 도구, UI 개발로 Component Driven Development를 하기 위한 도구이다.. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.
- Storybook은 재사용성 확대를 위해 컴포넌트를 문서화하고, 자동을 컴포넌트를 시각화해 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있도록 도와주며, 테스트 및 개발 속도를 향상시키는 장점을 가지고 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.
- 기본적으로 독립적인 개발 환경에서 실행돼, 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
🤔 Storybook에서 지원하는 주요 기능
- UI 컴포넌트들을 카탈로그화하기
- 컴포넌트 변화를 Stories로 저장하기
- 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
- 리액트를 포함한 다양한 뷰 레이어 지원하기
❤️🔥 Storybook 사용 방법
// 리액트 프로젝트 생성
npx create-react-app storybook-practice
// storybook 설치
npx storybook init
// storybook 실행
npm run storybook
// 명령어를 입력하면 React가 localhost:3000으로 접근하듯이,
// localhost:6006으로 접근하여 Storybook을 실행
❤️🔥 Story 작성하기
1. Title.js
import React from "react";
const Title = ({title, textColor}) => (
<h1 style={{color: textColor}}>{text}</h1>
)
export default Title
2. Title.stories.js
- .stories를 붙여 파일을 만들면 알아서 스토리로 인식
// 앞에서 작성한 컴포넌트를 불러옵니다.
import Title from "./Title";
// title : 컴포넌트 이름으로, '/'를 넣어 카테고리화 할 수 있습니다.
// 이후 예시에서 조금 더 자세히 설명합니다.
// component : 어떤 컴포넌트를 가져와서 스토리로 만들 것인지 명시합니다.
// argTypes : 컴포넌트에 필요한 전달인자의 종류와 타입을 정해줍니다.
// 지금은 title, textColor이라는 전달인자에 text 타입이 필요함을 의미합니다.
export default {
title: "Practice/Title",
component: Title,
argTypes: {
title: { control: "text" },
textColor: {control: "text"}
}
}
// 템플릿을 만들어줍니다. 이 템플릿에서는
// Title 컴포넌트가 args를 전달받아 props로 내려줍니다.
const Template = (args) => <Title {...args} />
// Storybook에서 확인하고 싶은 컴포넌트는 export const로 작성합니다.
// 템플릿을 사용하여 Storybook에 넣어줄 스토리를 하나 만들어주었습니다.
// Template.bins({}); 는 정해진 문법이라고 생각하고 사용하시면 됩니다.
export const RedTitle = Template.bind({});
// 만들어준 스토리의 전달인자를 작성해줍니다.
RedTitle.args= {
title: "Red Title",
textColor: "red"
}
// 스토리를 하나 더 만듭니다.
export const BlueTitle = Template.bind({});
// 스토리의 전달인자를 작성해줍니다.
BlueTitle.args= {
title: "Blue Title",
textColor: "blue"
}
