스토리는 UI 컴포넌트의 렌더링된 상태를 표시합니다. 다르게 표현하면 주어진 argument를 이용해 컴포넌트의 상태를 반환하는 함수입니다.

React의 props, Vue의 props, Angular의 @Input, 그리고 다른 모든 비슷한 개념을 모두 포괄하는 의미의 용어로 arguments, 줄여서 args를 사용합니다.

어디에 스토리를 두나요

컴포넌트의 스토리는 컴포넌트 파일 옆에 생성한 스토리 파일에 정의합니다. 이 스토리 파일은 개발할 때만 사용하므로 프로덕션 빌드에 들어가지 않아야 합니다.

Button.js | ts
Button.stories.js | ts

Component Story Format

컴포넌트 스토리 형식(Component Story Format, CSF)을 사용하여 스토리를 정의합니다. 컴포넌트 스토리 형식은 작성하기 쉽고, 여러 도구에 쉽게 적용 가능한 ES6 모듈 기반의 표준입니다.

컴포넌트에 대해 설명하는 기본 내보내기와 각 스토리를 의미하는 named export가 두 가지 핵심 재료입니다.

기본 내보내기

기본(default) 내보내기로 메타데이터를 내보냅니다. 메타데이터는 스토리북이 어떻게 스토리를 정렬하는지 결정하고, 애드온이 사용할 정보를 제공합니다.

// Button.stories.tsx

import React from 'react';

import { Meta } from '@storybook/react';

import { Button, ButtonProps } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
} as Meta;

스토리 정의하기

컴포넌트의 스토리를 정의하려면 CSF 파일에서 named export를 하세요. 스토리를 내보낼 때는 "PascalCase"(원문에는 UpperCamelCase)를 사용하는 것을 추천합니다.

// Button.stories.tsx

import React from 'react';

import { Button } from './Button';

export const Primary: React.VFC<{}> = () => <Button primary>Button</Button>;

스토리 이름 변경하기

어떤 스토리이든 이름을 변경할 수 있습니다. 더 명확한 이름을 지정할 수 있습니다.

// Button.stories.tsx

import React from 'react';

import { Button, ButtonProps } from './Button';

// 원문의 타입은 React.VFC인데 스토리 메타 데이터 속성을 알 수 있는 Story 타입이 더 적합함.
export const Primary: Story<{}> = () => <Button primary>Button</Button>;

Primary.storyName='I am the primary';

이제 사이드바에서 주어진 이름을 확인할 수 있습니다.

스토리를 작성하는 법

스토리는 어떻게 컴포넌트를 렌더링할 것인지 묘사하는 함수입니다. 하나의 컴포넌트에 여러 개의 스토리를 작성할 수 있습니다. 스토리를 만드는 가장 간단한 방법은 다른 arguments로 컴포넌트를 여러 번 렌더링하는 것입니다.