storybook 사용 방법

• 명령어

npx create-react-app storybook-practice
npx storybook init 
//이 명령어는 package.json 을 보고 사용 중인 프론트엔드 라이브러리에 맞는
//Storybook 사용 환경을 알아서 만들어주기 때문에, 꼭 React가 아니더라도 
//다양한 프론트엔드 라이브러리에서 사용 가능!
npm run storybook

localhost:6006으로 storybook이 실행된다!

• 스토리를 만드는 과정

1. src 폴더 안에 Title.js 파일을 하나 만들고, 다음과 같은 간단한 React 컴포넌트를 하나 만들어 export한다.

import React from "react";

// title은 h1 요소의 textContent, textColor은 글자색이 되는 props입니다.
const Title = ({title, textColor}) => (
<h1 style={{color: textColor}}>{title}</h1>
);

export default Title;

2. 같은 위치인 src 폴더 안에 Title.stories.js 파일을 만든다. /.storybook 안에 있는 Storybook 설정 파일에 의해서 컴포넌트 파일과 똑같은 파일 이름에 .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"
}

3. Storybook을 새로고침한다. Storybook은 핫 모듈 리로딩을 지원하기 때문에 따로 새로고침을 하지 않아도 변경 사항을 바로 확인할 수 있다!

4. 전달인자를 직접 받는 스토리를 만들어주려면 아래의 코드를 같은 페이지에 추가한다!

export const StorybookTitle = (args) =>{
    return <Title {...args} />
}