스토리는 UI 컴포넌트의 렌더링된 상태를 표시합니다. 다르게 표현하면 주어진 argument를 이용해 컴포넌트의 상태를 반환하는 함수입니다.
React의 props
, Vue의 props
, Angular의 @Input
, 그리고 다른 모든 비슷한 개념을 모두 포괄하는 의미의 용어로 arguments, 줄여서 args를 사용합니다.
컴포넌트의 스토리는 컴포넌트 파일 옆에 생성한 스토리 파일에 정의합니다. 이 스토리 파일은 개발할 때만 사용하므로 프로덕션 빌드에 들어가지 않아야 합니다.
Button.js | ts
Button.stories.js | ts
컴포넌트 스토리 형식(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로 컴포넌트를 여러 번 렌더링하는 것입니다.