React  스토리북 -  Args 구성 및 매개변수

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' },
  },
};

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 PrimaryLarge = Template.bind({});
PrimaryLarge.args = {
  ...Primary.args,
  ...Large.args,
}

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

PrimaryLarge 및 Primary 인수를 하나로 결합하여 만든 Large 인수를 생성합니다.

매개변수

매개변수는 스토리에 대한 이름이 지정된 정적 메타데이터 세트입니다.

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' },
  },
};

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
Primary.parameters = {
  backgrounds: {
    values: [
      { name: 'red', value: '#f00' },
      { name: 'green', value: '#0f0' },
    ],
  },
};

스토리에서 설정할 수 있는 매개변수를 추가합니다.
backgrounds 속성을 사용하면 미리보기 창에서 배경색을 설정할 수 있는 메뉴가 화면 상단에 표시되어야 합니다.
values에는 우리가 선택할 수 있는 선택의 이름과 값이 있습니다.

이제 Primary 스토리를 클릭하면 메뉴에서 빨강 또는 녹색을 선택하여 배경색을 설정할 수 있습니다.

구성 요소 매개변수

또한 구성 요소 전체에 매개 변수를 추가할 수 있습니다.

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

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  parameters: {
    backgrounds: {
      values: [
        { name: 'red', value: '#f00' },
        { name: 'green', value: '#0f0' },
      ],
    }
  }
};

모든 스토리에 backgrounds 메뉴를 추가합니다.

전역 매개변수

매개변수는 전역적으로 설정할 수도 있습니다.

이를 위해 .storybook/preview.js 파일에 추가합니다.

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  backgrounds: {
    values: [
      { name: 'red', value: '#f00' },
      { name: 'green', value: '#0f0' },
    ],
  },
}

내보낸 backgrounds 개체에 parameters 메뉴를 추가합니다.

매개변수 상속

전역, 구성 요소 및 스토리 매개변수가 있는 경우 덜 구체적인 매개변수보다 우선하는 더 구체적인 매개변수와 결합됩니다.

따라서 스토리 요소가 구성 요소보다 우선합니다.

그리고 구성 요소가 글로벌 요소보다 우선합니다.

결론

인수를 구성하고 매개변수를 추가하여 Storybook에서 구성 요소를 미리 볼 수 있도록 다양한 항목을 설정할 수 있습니다.