React용 스토리북 — 데코레이터

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Storybook을 사용하면 다양한 매개변수를 사용하여 구성 요소의 프로토타입을 쉽게 만들 수 있습니다.

이 기사에서는 Storybook으로 데코레이터를 사용하는 방법을 살펴보겠습니다.

데코레이터

데코레이터는 추가 렌더링 기능으로 스토리를 래핑하는 방법입니다.

추가 마크업으로 스토리 마무리하기

데코레이터를 사용하여 추가 마크업으로 스토리를 감쌀 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  decorators: [(Story) => <div style={{ margin: '20px' }}><Story /></div>]
};

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

구성 요소 주위에 구성 요소를 렌더링하는 함수 배열이 있는 decorators 속성이 있습니다.
Story는 우리가 우리 이야기에서 렌더링하는 구성 요소입니다.

조롱의 맥락

컴포넌트를 전역적으로 고차 컴포넌트로 래핑할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
.storybook/preview.js

import { ThemeProvider } from 'styled-components';

export const decorators = [
  (Story) => (
    <ThemeProvider theme="default">
      <Story />
    </ThemeProvider>
  ),
];

우리 이야기의 구성 요소 주위에 styled-components의 ThemeProvider HOC를 래핑합니다.

스토리 데코레이터

스토리 내에서 사용할 수 있는 데코레이터를 추가할 수 있습니다.

추가하려면 스토리 개체에 decorators 속성을 추가하기만 하면 됩니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
Primary.decorators = [(Story) => <div style={{ margin: '20px' }}><Story /></div>]

decorators 스토리의 Primary 속성에 데코레이터 배열을 할당합니다.

컴포넌트 데코레이터

컴포넌트의 모든 스토리에 데코레이터를 설정할 수 있습니다.

그렇게 하려면 내보내는 객체에 decorators 속성을 넣습니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  decorators: [(Story) => <div style={{ margin: '20px' }}><Story /></div>]
};

글로벌 데코레이터

.storybook/preview.js 파일을 내보내서 전역 데코레이터를 추가할 수 있습니다.

import React from 'react';

export const decorators = [(Story) => <div style={{ margin: '20px' }}><Story /></div>]

decorators 배열을 내보내어 모든 곳에 적용합니다.

데코레이터 상속

데코레이터는 특정 순서로 적용됩니다.

전역 항목은 먼저 정의된 순서대로 적용됩니다.

그런 다음 구성 요소 데코레이터가 정의된 순서대로 적용됩니다.

그리고 스토리 데코레이터는 정의된 순서대로 적용됩니다.

결론

데코레이터를 사용하면 구성 요소에 추가 마크업을 추가하고 스토리북에서 렌더링할 수 있습니다.