React를 위한 Storybook 튜토리얼

이 글은 올룰로 Confluence에 작성했던 글을 보관용으로 재포스팅 하는 것이다.

Storybook?

• UI 컴포넌트의 독립적 개발을 할 수 있도록 하는 오픈 소스 개발 도구
• Logic과 Data로부터 UI Component를 독립적으로 분리하여 만들 수 있게 함
• React Native, React, Vue, Angular, Web Components 등등 지원.

설치

• 설치하려는 프로젝트 폴더에서 아래 명령 실행

npx -p @storybook/cli sb init

실행

• 아래 명령으로 storybook을 실행합니다(6006 포트)

yarn storybook

예제

KButton.stories.js

• 기존 KButton Component에 대한 story를 추가한다고 가정

import React from 'react';

import KButton from './KButton';

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

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

export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
    updatedAt: new Date(2018, 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',
  },
};

.storybook/main.js

module.exports = {
  ...
  stories: ['../src/components/**/*.stories.js'],
  ...
};

.storyboo/preview.js

import '../src/index.css'; //👈 The app's CSS file goes here

//👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

프로젝트를 새로 만들지 않고 기존 프로젝트에 .stories.js를 추가해서 사용가능한 것 같다.

마치 테스트를 만드는것 처럼

Demo

원문 및 참조

• Storybook Tutorials
• https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/
• 스토리북을 이용한 컴포넌트 개발 (1) — 시작하기
• [10회-1]Say Hello to Storybook: 스토리북을 통한 React UI 컴포넌트 개발