Storybook

#CDD를 할수있는 대표적인 도구가 styled component이고
CDD를 지원하는 도구중 하나인 component explorer(컴포넌트 탐색기)에 많은 UI개발도구가 다양하게 있는데 그중 하나가 storybook이다.

#Storybook
-UI개발 즉, CDD를 하기 위한 도구이다. (UI개발도구)
-각각의 컴포넌트들을 따로 볼수있게 구성해주어 한번에 하나의 컴포넌트에서 작업할수있다. 
복잡한 개발스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요없이 전체 UI를 한눈에 보고 개발할수있다.
-재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할수있는 다양한 테스트 상태를 확인할수있다.
-이를 통해 버그를 사전에 방지할수있도록 도와준다.
-테스트 및 개발속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할수있다.
-storybook을 사용하면 애프리케이션을 실행하고 이벤트를 통해 상태를 변경하는 과정을 거치지 않아도 상태 변화에 따른 컴포넌트의 변화를 확인할수있다.

-컴포넌트들을 문서화해서 관리한다.

#사용하는이유
- storybook은 기본적으로 독립적인 개발환경에서 실행된다. 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할수있다.
-회사의 내부 개발자들을 위해 문서화를 하여 회사의 UI라이브러리로써 사용하거나, 외부 공개용 디자인 시스템을 개발하기 위한 기본 플랫폼으로 사용할수있다.

#storybook에서 지원하는 주요기능
-UI컴포넌트들을 카탈로그화하기
-컴포넌트 변화를 Stories로 저장하기
-핫 모듈 재 로딩과 같은 개발 눌 경험을 제공하기
-리액트를 포함한 다양한 뷰 레이어 지원하기

 

#사용방법

일단 Create React App을 활용해서 리액트 프로젝트를 만들어라.

폴더가 생성되면, 폴더 안에서 밑의 코드를 실행해라.

npx storybook init

storybook 설치가 완료되면, /src/stories폴더가 생성된다.(storybook 예시파일들이 들어있다.)

이제 storybook을 실행해라

npm run storybook

그럼 localhost:6006으로 접근할거다.

 

이렇게 storybook을 실행하면 애플리케이션을 실행하고 이벤트를 통해 상태를 변경하는 과정을 거치지 않아도 상태 변화에 따른 컴포넌트의 변화를 확인할수있다.

---

src폴더안에 Title.js파일을 하나 만들어라.

import React from "react";

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

export default Title;

src폴더안에 Title.stories.js파일을 하나 만들어라.

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.bind({}); 는 공식이다.그냥암기해라.
export const RedTitle = Template.bind({});

// 만들어준 스토리의 전달인자를 작성해줍니다.
RedTitle.args= {
    title: "Red Title",
    textColor: "red"
}

export const BlueTitle = Template.bind({});

BlueTitle.args= {
    title: "Blue Title",
    textColor: "blue"
}

#전달인자를 직접 받는 스토리를 만들어보자.

전달인자를 직접 작성해주면 거기에 맞춰 모습이 변한다.

밑의 코드 추가하면된다.

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

 

#전달인자를 직접 받으면서, styled component를 사용해서 만든 컴포넌트를 스토리로 만들어보자.

//Button.js
import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
background: ${(props)=> props.color || "white"};
width: ${(props)=> (props.size === "big" ? "200px":"100px")};
height: ${(props)=> (props.size === "big" ? "80px" : "40px")}
`
const Button = ({color, size, text}) => (
<StyledButton color={color} size={size}>{text}</StyledButton>
);
export default Button

//Button.stories.js
import Button from "./Button";

export default{
title: "Practice/Button",
component: Button,
argTypes: {
color: { control: 'color'},
size: { control: {type:'radio', options: ['big', 'small']}},
text: {control: 'text'}
}
};
export const StorybookButton = (args) => (
<Button {...args}></Button>
)