Storybook은 컴포넌트 개발을 위한 강력한 도구입니다. 이 도구를 사용하면 컴포넌트를 개별적으로 테스트하고 문서화할 수 있으며, 애플리케이션과 완전히 분리되어 개발할 수 있습니다.

1. Storybook 설치

Storybook을 사용하기 위해 우선적으로 설치해야 합니다. 다음 명령어를 사용하여 Storybook을 설치합니다.

npx sb init

위 명령어를 실행하면 프로젝트의 package.json 파일에 설정이 추가됩니다.

2. Stories 작성

Storybook에서는 각 컴포넌트에 대한 스토리를 작성해야 합니다. 스토리는 컴포넌트의 다양한 상태와 사용 예시를 나타냅니다.

src 디렉토리에 components 폴더를 생성하고, 각 컴포넌트마다 [ComponentName].stories.js 파일을 작성합니다.

다음은 예시입니다.

// src/components/Button/Button.stories.js

import React from 'react';
import { Button } from './Button';

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

export const Primary = () => <Button label="Primary Button" />;
export const Secondary = () => <Button label="Secondary Button" />;

위 예시에서는 Button 컴포넌트에 대한 두 가지 스토리를 작성하였습니다. Primary 스토리는 label prop을 “Primary Button”으로 설정한 Button 컴포넌트를 렌더링하고, Secondary 스토리는 label prop을 “Secondary Button”으로 설정한 Button 컴포넌트를 렌더링합니다.

3. Storybook 실행

스토리를 작성한 후에는 Storybook을 실행하여 결과를 확인할 수 있습니다. 다음 명령어를 사용하여 Storybook을 실행합니다.

npm run storybook

위 명령어를 실행하면 브라우저에서 Storybook이 실행되며, 각 스토리의 렌더링 결과를 확인할 수 있습니다.

4. 스토리북 확장

Storybook은 다양한 애드온을 제공하여 기능을 확장할 수 있습니다. 예를 들어, 애드온을 사용하여 컴포넌트의 스타일을 조정하거나, 상태 변화를 시뮬레이션 할 수 있습니다.

Storybook 공식 문서에서 제공하는 애드온 리스트를 참고하여 필요한 애드온을 설치하고, 사용할 수 있습니다.

5. 컴포넌트 문서화

Storybook을 사용하면 컴포넌트에 대한 문서화를 쉽게 할 수 있습니다. 스토리의 제목과 설명을 추가하여 각 컴포넌트의 사용 방법과 속성에 대한 정보를 제공할 수 있습니다.

예를 들어, 다음과 같이 스토리의 제목과 설명을 추가할 수 있습니다.

export default {
  title: 'Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: 'A simple button component',
      },
    },
  },
};

위 예시에서는 Button 컴포넌트에 대한 스토리의 설명을 추가하였습니다. 이제 Storybook에서 컴포넌트에 대한 문서를 확인할 수 있습니다.

결론

Storybook은 컴포넌트 개발을 위한 강력한 도구로, 컴포넌트의 개발과 테스트를 쉽게 할 수 있습니다. 스토리를 작성하여 컴포넌트의 다양한 상태와 사용 예시를 확인할 수 있고, 문서를 추가하여 컴포넌트에 대한 정보를 제공할 수 있습니다.