스토리북으로 개발하기

스토리북?

스토리북은 독자적인 UI 컴포넌트 개발을 위한 업계표준 컴포넌트 탐색기 입니다.

내부 개발자들을 위한 문서화(Documentations)에 사용할 수도 있고, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있습니다.

장점

• 복잡한 로직 없이 독립적인 환경에서 컴포넌트를 개발을 할 수 있습니다.
• 재사용을 위한 컴포넌트 들을 Story 에서 조합해 테스트 할 수 있습니다.
• 컴포넌트들을 문서화 할 수도 있고 디자인 시스템에 적용해 피그마의 컴포넌트들과 동기화할 수 있습니다.

초기세팅

# Storybook 설치
npx storybook init

# Storybook 실행
yarn storybook

폴더구조

크게 .storybook 폴더와 stories 폴더가 생성되는데, .storybook 폴더 내부의 파일들은 전역적인 설정 관련

stories 폴더 내부에는 예시가 되는 컴포넌트와 스토리들이 위치합니다.  

 

.storybook 폴더

main.js

stories를 위한 config 설정들이 위치합니다.

예를들어

• stories: stories 파일이 어디에 있는지 경로설정
• addon: 확장 프로그램 설정

등이 있습니다.

preview.js

모든 스토리에 글로벌하게 적용되는 포맷세팅

 

스토리?

스토리는 쉽게말해 하나의 컴포넌트가 실행가능한 하나의 케이스를 의미합니다. 특정한 props를 넘겼을 때, 그 자체가 하나의 스토리가 되고 그렇게 다양한 스토리들을 정의하면 스토리북에서 스토리를 직관적으로 확인 할 수 있습니다.

기본 형태

export default {
  title: 스토리북에 올릴 component폴더 계층 구조,
  component: 스토리를 만들 컴포넌트 이름
}

export const 스토리이름 = () => 해당스토리에서 테스트할 인자가 담긴 컴포넌트

적용예시

// Button.tsx
import React from 'react';
import styled from '@emotion/styled';
interface ButtonProps {
    label: string;
    size?: 'small' | 'large';
    onClick?: () => void;
}

export default function Button({label, size, ...props}:ButtonProps) {
    return (
        <Styled.Button size={size}>
            <div className="button" role="button" {...props}>
                {label}
            </div>
        </Styled.Button>
    )
}

const Styled = {
    Button:styled.div<{size: 'small'|'large'}>`
        display: flex; 
        justify-content: center;
        align-items: center;
        width: ${({ size }) => (size === 'small' ? '48px' : '76px')};
        border-bottom: 1px solid #FFFFFF;
        .button{
            padding-top: 11px;
            padding-bottom: 11px;
            cursor: pointer;
            color: #FFFFFF;
            text-align: center;
            font-family: JejuMyeongjo;
            font-size: 14px;
        }
    `,
}

// Button.stories.tsx
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import Button  from './Button';

// 어떤 컴포넌트의 story인지, 어떤 설정으로 렌더링할지 정의 
export default {
  title: 'stories/Button',
  component: Button,
} as ComponentMeta<typeof Button>;

// 기본 포맷을 정해두고 bind로 제어 
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

// 각각이 새로운 스토리들
// export const Small = () => <Button size="small" label="button" />; 얘와 같음
export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

간단하게 스토리 작성하는 법에 대해 알아보았습니다.

 

Reference

https://velog.io/@devstone/%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%B6%81-%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/build/

https://www.daleseo.com/storybook/