React용 스토리북 시작하기

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

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

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

이 기사에서는 Storybook을 시작하는 방법을 살펴보겠습니다.

시작하기

Create React App으로 React 프로젝트를 먼저 생성하여 시작할 수 있습니다.

생성하기 위해 다음을 실행합니다.

npx create-react-app storybook-project

그런 다음 다음을 실행하여 Storybook을 추가할 수 있습니다.

npx sb init

그런 다음 다음을 실행하여 실행할 수 있습니다.

npm run storybook

스토리북을 실행합니다.

이제 우리는 이야기를 만들 수 있습니다.

이야기에는 우리가 그것을 조정할 수 있도록 몇 가지 인수를 취할 수 있는 구성 요소가 있습니다.

이러한 인수에 대한 기본값을 제공할 수 있습니다.

먼저 몇 가지 소품을 사용하는 구성 요소를 만듭니다.
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,
};

그런 다음 스타일을 지정하기 위해 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;
}

버튼은 다양한 스타일로 버튼을 수정할 수 있도록 많은 소품을 사용합니다.
primary는 부울 소품입니다.
backgroundColor는 문자열 소품입니다.
size enum 유형으로 크기를 변경할 수 있습니다.
label 레이블을 표시할 수 있습니다.
onClick는 클릭을 처리하도록 하는 함수입니다.

Storybook에 표시하려면 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',
};

우리는 우리가 표시하고자 하는 것들과 함께 객체를 내보냅니다.
title 스토리북에 표시하려는 제목이 있습니다.
component는 미리 볼 구성 요소입니다.
argTypes 다양한 소품에 대한 제어 유형을 설정하여 Storybook에서 변경하고 미리 볼 수 있습니다.

그 아래에는 args가 있습니다. args를 사용하면 구성 요소에 소품을 전달하여 변경할 수 있습니다.
Template.bind 메서드로 일부 기본값을 제공하고 args 속성을 원하는 값으로 설정합니다.

결론

구성 요소를 만들고 Storybook으로 미리 볼 수 있습니다.

props를 수락하고 args로 바인딩하면 변경할 수 있습니다.