[React] Story book 리액트 스토리북

 

🗒 story book이란?

story book이란, UI 컴포넌트를 독립적으로 분리해 개별적으로 관리하고 테스트할 수 있도록 도와주는 도구입니다.

 

 

story book 템플릿 사용해보기

# 스토리북 템플릿 clone하기
$ npx degit chromaui/intro-storybook-react-template taskbox

$ cd taskbox

# dependencies 설치하기
$ yarn

 

 

story book으로 Task 컴포넌트 생성하기

 

• title – task를 설명해주는 문자열
• state - 현재 어떤 task가 목록에 있으며, 선택되어 있는지의 여부

 

먼저 src/components/Task.js와 src/components/Task.stories.js의 두 파일을 생성합니다.

 

📁 src/components/Task.js

import React from 'react';

export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
    <div className="list-item">
      <input type="text" value={title} readOnly={true} />
    </div>
  );
}

 

 

📁 src/components/Task.stories.js

import React from 'react';

// 사용할 컴포넌트 import
import Task from './Task';

export default {
  component: Task, // 스토리북에 나타낼 컴포넌트
  title: 'Task', // title: 스토리북에 나타날 이름 [optional]
};

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

// Task 컴포넌트 default 버전
export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
    updatedAt: new Date(2021, 0, 1, 9, 0),
  },
};

// Task 컴포넌트 pinned 버전
export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task, // default Task 컴포넌트와 같은 내용
    state: 'TASK_PINNED',
  },
};

// Task 컴포넌트 archived 버전
export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_ARCHIVED',
  },
};

 

스토리는 주어진 상태안에서 렌더링된 요소(예를 들자면, prop가 포함된 컴포넌트)를 반환하는 함수입니다. 이는 함수형 컴포넌트(Functional Component)와 같습니다.

 

 

💡 Template.bind({})는 함수의 복사본을 만드는 표준 JavaScript의 한 기법입니다. 우리는 이 기법을 사용하여 각각의 스토리가 고유한 속성(properties)을 갖지만 동일한 결과물을 사용하도록 할 수 있습니다.

 

인수(arguments) 또는 간단히 줄여서 args를 사용하여 스토리북을 다시 시작하지 않고도 Controls addon으로 컴포넌트를 실시간으로 수정할 수 있습니다. args의 값이 변하면 컴포넌트도 함께 변합니다.

 

스토리를 만들 때 우리는 기본 task 인수를 사용하여 컴포넌트가 예상하는 task의 형태를 구성합니다. 이는 일반적으로 실제 데이터를 모델로 하여 만들어집니다. 다시 말하지만 export하는 것은 차후 스토리에서 이를 재사용 할 수 있도록 해줍니다.

 

 

스토리북 환경설정

스토리북 환경설정 파일 (.storybook/main.js)을 다음과 같이 변경합니다.

 

📁 .storybook/main.js

module.exports = {
 stories: ['../src/components/**/*.stories.js'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-interactions',
  ],
  features: {
    postcss: false,
  },
  framework: '@storybook/react',
  core: {
    builder: 'webpack4',
  },
};

위와 같이 .storybook 폴더에 변경을 마치셨다면, preview.js를 아래와 같이 변경합니다.

 

📁 .storybook/preview.js

import '../src/index.css';

//👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

 

 

📁 src/components/Task.js

import React from 'react';

export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
    <div className={`list-item ${state}`}>
      <label className="checkbox">
        <input
          type="checkbox"
          defaultChecked={state === 'TASK_ARCHIVED'}
          disabled={true}
          name="checked"
        />
        <span
          className="checkbox-custom"
          onClick={() => onArchiveTask(id)}
          id={`archiveTask-${id}`}
          aria-label={`archiveTask-${id}`}
        />
      </label>
      <div className="title">
        <input type="text" value={title} readOnly={true} placeholder="Input title" />
      </div>

      <div className="actions" onClick={event => event.stopPropagation()}>
        {state !== 'TASK_ARCHIVED' && (
          // eslint-disable-next-line jsx-a11y/anchor-is-valid
          <a onClick={() => onPinTask(id)}>
            <span className={`icon-star`} id={`pinTask-${id}`} aria-label={`pinTask-${id}`} />
          </a>
        )}
      </div>
    </div>
  );
}

 

 

공식 문서 참조

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/