[Storybook] tutorial

chosh·2023년 7월 7일

storybook tutorial

storybook 에서 제공하는 튜토리얼을 진행하고 정리한 글
최신화 되어 있는 영문버전을 보고 진행했습니다.

Get Started

환경 셋팅

template clone
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox -> yarn
yarn storybook 으로 테스트 가능

CDD(Component Driven Development)

컴포넌트 중심의 개발 방법론으로 작은 컴포넌트부터 페이지까지 상향식으로 개발하는 것을 말함
CDD를 사용하면 개발하면서 겪는 규모의 복잡성을 해결하는데 도움이 됨

Simple Component

컴포넌트 생성

src/components/ 경로에
Task.jsx 와 Task.stories.jsx 파일을 생성한다

컴포넌트 단위로 storybook을 테스트 하기 때문에 컴포넌트와 같은 경로에 만들어주는게 좋을거 같다

Task.stories.jsx 파일

import Task from "./Task";

export default {
  component: Task,
  title: "Task",
  tags: ["autodocs"],
};
.
.
.

component -- 테스트할 컴포넌트
title -- 사이트바에 표시할 이름(컴포넌트 이름으로 하는게 겹치지 않고 좋을거 같음)
tags -- ["autodocs"] 로 지정하면 자동으로 문서 생성해줌

원문

- component -- the component itself
- title -- how to group or categorize the component in the Storybook sidebar
- tags -- to automatically generate documentation for our components

config 추가

튜토리얼에는 style 파일이 추가 되어 있기 때문에 import 만 해주면 됨
.storybook/preview.js 경로로 이동해서
가장 상단에 import '../src/index.css' 를 추가해준다

type 지정

typescript를 사용하지 않을때 사용하는거 같음

import PropTypes from "prop-types"; 를 컴포넌트에 import

아래의 코드를 컴포넌트 하단에 추가
이렇게 하면 잘못된 값이 전달될때 콘솔에 에러가 출력됨

Task.propTypes = {
  /** Composition of the task */
  task: PropTypes.shape({
    /** Id of the task */
    id: PropTypes.string.isRequired,
    /** Title of the task */
    title: PropTypes.string.isRequired,
    /** Current state of the task */
    state: PropTypes.string.isRequired,
  }),
  /** Event to change the task to archived */
  onArchiveTask: PropTypes.func,
  /** Event to change the task to pinned */
  onPinTask: PropTypes.func,
};

Web Content Accessibility Guidelines를 위한 패키지 설정

최대 57%의 접근성 문제를 잡아주는 패키지 라고 한다.

패키지 설치
yarn add --dev @storybook/addon-a11y
.storybook/main.js 경로 파일 수정
addon 배열에 '@storybook/addon-a11y' 추가
설정 완료 후 확인하는 방법은 yarn storybook 실행
버튼들의 Accessibility 탭 확인
Archived 를 확인해보면 Accessibility 에 배경색과 텍스트 색에 대한 경고를 주고 있음

Composite Component

복합적인 컴포넌트 만들기(컴포넌트를 불러와서 새로운 컴포넌트 만들기)

아토믹 패턴 처럼 작은 컴포넌트(Task)를 불러와서 큰 컴포넌트(TaskList)를 구현 하는 방법

TaskList.jsx 와 TaskList.stories.jsx 를 만든다
Task.jsx 를 불러오고 Task.stories.jsx의 데이터를 이용해서 리스트 데이터를 만들어준다
만든 데이터를 전달해서 TaskList 테스트 컴포넌트를 만들어 준다

Task의 propsTypes나, Default.args 를 사용하는 방법을 알아두면 좋을거 같다.

propsTypes(TaskList.jsx)

TaskList.propTypes = {
  /** Checks if it's in loading state */
  loading: PropTypes.bool,
  /** The list of tasks */
  tasks: PropTypes.arrayOf(Task.propTypes.task).isRequired,
  /** Event to change the task to pinned */
  onPinTask: PropTypes.func,
  /** Event to change the task to archived */
  onArchiveTask: PropTypes.func,
};
TaskList.defaultProps = {
  loading: false,
};

Task 컴포넌트를 import 하니까 Task.propTypes 를 사용가능

Default.args(TaskList.stories.jsx)

작은단위의 컴포넌트의 stories 파일에서 지정한 데이터를 가져오기 위해 import
import * as TaskStories from "./Task.stories";

가져온 데이터를 큰단위의 컴포넌트에서 바꿀껀 바꿔주고 그대로 사용해도 되는것들은 그대로 사용

export const Default = {
  args: {
    // Shaping the stories through args composition.
    // The data was inherited from the Default story in Task.stories.jsx.
    tasks: [
      { ...TaskStories.Default.args.task, id: "1", title: "Task 1" },
      { ...TaskStories.Default.args.task, id: "2", title: "Task 2" },
      { ...TaskStories.Default.args.task, id: "3", title: "Task 3" },
      { ...TaskStories.Default.args.task, id: "4", title: "Task 4" },
      { ...TaskStories.Default.args.task, id: "5", title: "Task 5" },
      { ...TaskStories.Default.args.task, id: "6", title: "Task 6" },
    ],
  },
};

Data

redux toolkit 셋업

yarn add @reduxjs/toolkit react-redux 커멘드 실행
store.js 파일 생성
redux toolkit 으로 관리 하는 데이터로 랜더링 변경
stories 파일은 목데이터로 관리하도록 변경

튜토리얼 하면서 느낀점

한국어 문서가 조금 아쉽다, 아마도 문서를 작성하고 영어문서만 업데이트 하지 않았을까 싶다. 내가 바꿔보고 싶지만, 영어를 잘 못해서 오역을 하게 되면 많은 사람이 피해를 볼수 있기 때문에 영문으로 튜토리얼을 진행
문서를 굉장히 잘 만든거 같다 튜토리얼 따라가는게 물흐르듯이 지나가는거 같은 느낌
테스트 데이터를 잘 관리하는거 같다. Task의 Default 데이터 하나를 이용해서 여러곳에서 데이터를 전달하는 느낌(내가 테스트 컴포넌트를 만들때도 참고할 수 있을거 같다)

참고자료