구성 요소 중심 개발(CDD)

구성요소 중심 개발(Component-Driven Development) 는 부품 단위로 UI 컴포넌트를 만들어가는 개발방법입니다

당연히 재사용성이 좋겠죠?

Storybook

Storybook 은 CDD를 위한 개발도구(라이브러리)입니다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해줘서 한번에 하나의 컴포넌트에서 작업할 수 있습니다. 즉 전체 UI를 한눈에 보고 개발할 수 있습니다

장점

• 재사용성 확대를 위한 컴포넌트 문서화
• 자동으로 컴포넌트 시각화를 통해 다양한 테스트 상태 시뮬레이션 가능
• 버그 사전에 방지
• 테스트 및 개발 속도 향상
• 애플리케이션 의존성 걱정없이 빌드 가능

주요기능

• UI 컴포넌트들을 카탈로그 화하기
• 컴포넌트 변화를 Stories로 저장하기
• 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
• 리액트를 포함한 다양한 뷰 레이어 지원하기

설치

npm install -g @storybook/cli

// 버전 확인
getstorybook -V

// 자동으로 필요한 파일 생성
getstorybook init

스토리 작성

스토리의 작성 파일명은 컴포넌트명.stories.js 로 작성해줘야 한다

import React from 'react';
import { ButtonComponent } from '../component/Atoms/ButtonComponent'

export default {
  title: 'Atoms/ButtonComponent',
  component: ButtonComponent,
  argTypes: {
    text: { control: 'text' },
    size: { control: 'text' },
    onClick: { control: '' },
  },
};

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

export const Primary = Template.bind({});
Primary.args = {
  text: 'text',
  size: 'small',
  onClick: '',
};

소스코드

• default 는 스토리의 설정을 나타낸다 title은 컴포넌트 명이며 / 를 통해 카테고리 형성이 가능하다 component 는 파라미터에 아무것도 저장하지 않은 단순한 컴포넌트의 형태를 가져오는 것이다 argTypes 는 컴포넌트에 필요한 인수와 타입을 작성하는 것이다 타입 혹은 다른 타입을 control 키에서 변경 가능하다
• 각 const의 export 들은 예시 컴포넌트를 보여준다

스토리북 실행

npm run storybook

참조

디자인 시스템 소개

Storybook 공식문서