컴포넌트 주도 개발

컴포넌트 주도 개발이란?

• CDD(Component-Driven Development)
• 개발 단계에 있어서 모든 페이지를 전부 한번에 작성하는 것이 아니라, 컴포넌트 단위로 개발하여 컴포넌트를 조립하여 웹페이지를 완성하는 개발 방식.
• 만약 어떤 버튼을 추가하고 싶을 때, 기존 방식대로라면 CSS, HTML, JS 를 전부 수정하겠지만, CDD를 이용하면 버튼 컴포넌트를 만들어 추가하는 방식으로 해결 할 수 있다.

Storybook

• 컴포넌트 탐색기의 일종으로 CCD 를 돕는 툴이다.
• 개별 컴포넌트를 따로따로 볼 수 있게끔 한다.
• 컴포넌트를 문서화하거나, 컴포넌트를 시각화하여 테스트 상태를 만들 수 있다.
• 새로고침 없이 문서의 변화를 업데이트 할 수 있다.
  → Hot Module Replacement, HMR
• 다양한 뷰 레이어를 지원한다.
• 컴포넌트의 변화를 stories 로 저장한다.

설치하기

• 설치에는 두 가지 방법이 있다.

1. 프로젝트를 처음부터 만들어서 시작하는 방법

npx degit chromaui/intro-storybook-react-template 프로젝트 폴더 이름

2. 기존의 프로젝트에 추가하는 방법

npx -p @storybook/cli sb init

• 이후 npm run storybook 을 이용하여 실행한다.

사용하기

1. 먼저, 관리할 컴포넌트를 생성한다.
   → 현재 예시에선 미리 만들어진 Storybook 의 예시 파일을 사용한다.
   import { Button } from "@storybook/react/demo";

// 데모파일 내부 내용

declare const Button: {
    ({ children, onClick, }: {
        children: React.ReactNode;
        onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
    }): JSX.Element;
    displayName: string;
    propTypes: {
        children: PropTypes.Validator<PropTypes.ReactNodeLike>;
        onClick: PropTypes.Requireable<(...args: any[]) => any>;
    };
    defaultProps: {
        onClick: () => void;
    };
};

→ 위와 같은 형식의 포맷을 CSF(Component Story Format) 이라고 하며, Storybook 에서 사용되는 메타데이터를 담는 포맷이다.

import React from "react";
export const Button = () => {
  return (
    <button>Default Button</button>
  );
};

2. stories 폴더에 관리할 컴포넌트를 커스텀한 파일을 작성한다.

• 이때, 파일명은 컴포넌트명.stories.js 가 되어야한다.
  → 예시의 경우 컴포넌트의 이름이 Button.js 이므로, Button.stories.js 가 되어야한다.

import React from "react";
import { Button } from "@storybook/react/demo";

export default {
  title: "Button", // 보여질 이름을 지정한다.
  component: Button
};

// 아래에 작성한 케이스들이 스토리북상에서 보여진다.

// 스토리 1
export const Primary = () => <Button>Hello Button</Button>;
// 스토리 2
export const Secondary = () => <Button>Bye Button</Button>;