🔍 Stotybook

CDD 개발 도구 중 하나로, 각 컴포넌트들을 따로 볼 수 있게 구성하기 때문에 한 번에 하나의 컴포넌트에서 작업할 수 있으며 독립적인 개발 환경에서 실행되므로 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.

또한, 재사용성을 높이기 위해 컴포넌트를 문서화하고, 다양한 테스트가 가능하도록 컴포넌트를 시각화하여 사전에 버그를 방지할 수 있도록 한다.

👀 Setting

1. 터미널에 npx create-react-app <프로젝트 명> 명령어를 입력해 설치한 후, 새로운 react 프로젝트를 생성한다.

2. react 프로젝트 폴더 안에서 npx storybook init 명령어를 입력해 storybook을 설치한다.
   
   
   ./storybook = storybook 관련 설정 파일
/src/stories = storybook 예시 파일들

3. npm run storybook 명령어를 입력해 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 파일을 생성한다.(자동으로 스토리로 인식)

// 앞에서 작성한 컴포넌트를 불러온다.
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로 작성한다.
// Template.bins({}); 는 정해진 문법

// 템플릿을 사용하여 Storybook에 넣을 스토리 생성
export const RedTitle = Template.bind({});

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

// 템플릿을 사용하여 Storybook에 넣을 스토리 생성 2.
// 2. BlueTitle
export const BlueTitle = Template.bind({});

// 만들어준 스토리의 전달인자를 작성2
BlueTitle.args= {
    title: "Blue Title",
    textColor: "blue"
}

// 전달인자를 직접 받는 스토리 생성
// 3. UserTitle
export const StorybookTitle = (args) =>{
    return <Title {...args} />
}

• 1. RedTitle
     
     
     
• 2. BlueTitle
     
     
     
• 3. UserTitle(전달인자를 직접 입력)
     
     

✔ Styled Components를 사용해서 만든 컴포넌트를 스토리로 만들기

1. Button.js 파일 생성

import React from "react";
import styled from "styled-components"

const StyledButton = styled.button`
// props.color가 있으면 props.color, 아니면 흰색을 배경색으로
background: ${(props) => props.color || "white" };
// props.size가 bug이면 200px, 아니면 100px를 너비로
width: ${(props) => (props.size === "big" ? "200px" : "100px") };
// props.size가 "big"이면 80px, 아니면 40px를 높이로
height: ${(props) => (props.size === "big" ? "80px" : "40px") };
`

const Button = ({color, size, text}) => (
// 위에서 작성한 props + text를 받아 textContent로 사용
<StyledButton color={color} size={size}>{text}</StyledButton>
);

export default Button;

2. 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>
)

Reference: 코드스테이츠