React용 스토리북 — Args

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

이 기사에서는 Storybook에서 args를 사용하는 방법을 살펴보겠습니다.

인수 개체

args 객체를 사용하면 구성 요소에 전달할 인수를 전달하여 변경할 수 있습니다.

스토리 및 구성 요소 수준에서 전달할 수 있습니다.

Args는 문자열 키가 있는 객체입니다.

스토리 인수

다음과 같이 작성하여 스토리에 인수를 추가할 수 있습니다.
src/stories/button.css

.button {
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}
.button-primary {
  color: white;
  background-color: #1ea7fd;
}
.button-secondary {
  color: #333;
  background-color: transparent;
}
.button-small {
  font-size: 12px;
  padding: 10px;
}
.button-medium {
  font-size: 14px;
  padding: 11px;
}
.button-large {
  font-size: 16px;
  padding: 12px;
}

src/stories/Button.js

import React from 'react';
import PropTypes from 'prop-types';
import './button.css';

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'button-primary' : 'button-secondary';
  return (
    <button
      type="button"
      className={['button', `button-${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};

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 Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Template 함수를 생성하여 원하는 소품으로 Button를 렌더링합니다.

그런 다음 반환된 객체에 Template.bind 속성을 설정할 수 있도록 args를 호출합니다.

이런 식으로 props의 기본값을 설정할 수 있습니다.

서로 다른 args 객체를 병합할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
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 PrimaryLongName = Template.bind({});

PrimaryLongName.args = {
  ...Primary.args,
  label: 'Primary button long name',
}

재사용할 수 있도록 Primary 개체의 인수를 PrimaryLongName 개체로 병합했습니다.

구성 요소 인수

컴포넌트에 args를 정의할 수 있습니다.

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

import React from 'react';

import { Button } from './Button';

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

스토리의 모든 버튼에서 primary 소품을 true로 설정했습니다.

결론

테스트를 위해 React 구성 요소에 다른 소품을 전달하도록 스토리에 인수를 설정할 수 있습니다.