이론

스토리북

• React, Vue등의 분리된 UI 컴포넌트를 체계적이고 효율적으로 구축할 수 있는 개발도구
• UI 컴포넌트 라이브러리의 문서화(Documentation)을 위해 사용할 수 있다
  
  
  
  

설치

# next 프로젝트 세팅
$ npx create-next-app --typescript start-storybook

# storybook cli 설치
$ npm install --save-dev sb

# storybook 세팅
$ npx sb init

package.json파일에 위 이미지와 같이 자동으로 scripts가 생성된다

위와 같이 stories 폴더안에 관련한 파일들이 자동으로 생성된다

Story 작성

Story는 Storybook을 구성하는 기본 구성 단위이고, 컴포넌트는 기본적으로 하나 이상의 Story로 구성된다.

Story는 <컴포넌트이름>.stories.js 파일 안에 작성하고, 컴포넌트 파일과 같은 디렉토리 안에 작성한다.

#   Storybook-project/
├── src/
│   └── components/
│       ├── ...
│       ├── MyButton.js       # => Component
│       ├── MyButton.stories.js # => Story
│       └── ...

#   .storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/components/**/*.stories.js"             <---- 추가
  ]
}

CSF구성

Story파일은 컴포넌트 스토리 포맷(Component Story Format, CSF)으로 default export 한다

// src/stories/Button.stories.js

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  args: {
    backgroundColor: '#000'
  },
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};
...

• title

  • Storybook의 사이드바에 표시될 스토리 이름
  • / 로 구분할 경우 그룹과 스토리 이름으로 구분 가능
  • title: 'Example/Button'은 Example 그룹의 Button 스토리
  • 

• component

  • Story에 사용될 component

• args

  • 모든 스토리에 공통으로 전달될 props
  • 예를들어 backgroundColor: '#000'일 경우, backgroundColor props로 #000 으로 전달된다

• argTypes

  • 각 Story args의 행동(behavior), 타입(Type) 에 대한 설정

  • argTypes: {
      backgroundColor: { control: 'color' },
      zorba: { control: { type: 'range', min: 1, max: 30, step: 3 } }
    },
    

  • Control 문서
    

• decorators

  • Story를 래핑하는 추가 렌더링 기능

• parameters

  • Story에 대한 정적 메타 데이터 정의

• excludeStories

  • 렌더링 제외 설정
    
    
    
    
    

Docs 작성

# MyName.tsx

interface MyNameInterface {
  /**
   * 이건 name 이다
   */
  name: string,
  /**
   * 이건 title 이다
   */
  title: number
}

SDD (Storybook Driven Developement) = CDD (Component Driven DeDevelopement)

• 컴포넌트 중심의 개발 프로세스를 지향하는 개발 방법론
• 컴포넌트 수준에서 시작하여 페이지나 화면 수준까지 개발하는 방식 (bottom up)

• 장점

  • Focus development
  • 단일 컴포넌트에 집중하여 개발

• Increase UI coverage

  • 모든 상태의 컴포넌트를 열거하는 것, 가능한 모든 시나리오에서 작동하는것을 보장

• Target feedback

  • 다른 동료, 디자이너와 커뮤니케이션할때 컴포넌트에 초점을 맞춤

• Build a component library

  • 컴포넌트 재사용성 극대화

• Test visually

  • 시각적인 테스트 가능

실전

import React from 'react';

import Task from './Task';

export default {
  component: Task,
  title: 'Task',
};

const Template = (args) => <Task {...args} />;

export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
    updatedAt: new Date(2021, 0, 1, 9, 0),
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_PINNED',
  },
};

export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_ARCHIVED',
  },
};

• Template.bind({})
  • 함수의 복사본을 만드는 표준JS의한 기법
  • 이 방식을 통해 각각의 스토리가 고유한 속성을 갖지만 동일한 결과물을 사용하도록 할 수 있다