리액트 개발자? 스토리북을 사용해야 하는 이유와 방법

React 생태계에는 훌륭한 도구가 많이 있습니다. 하지만 반드시 사용해야 하는 것은 몇 가지에 불과합니다. 스토리북도 그 중 하나입니다.

Storybook을 모르신다면 좋은 소식이 있습니다! Storybook을 사용하는 이유는 분명하고 시작하기가 매우 쉽습니다!

Storybook이란 무엇이며 필요한 이유

Storybook을 설치하고 스토리를 작성하고(자세한 내용은 나중에 설명) Storybook을 실행하면 다음과 같은 결과가 나타납니다.



파란색 사각형 보이시죠? 이것은 React 구성 요소 중 하나입니다. 나머지는 Storybook에서 제공하는 UI입니다.

Storybook은 구성 요소별 샌드박스를 제공하므로 구성 요소를 한 번에 하나씩 빠르게 사용할 수 있습니다.

이것이 어떻게 유용합니까?

바로 연결

작업 중인 이 구성 요소는 항상 앱에 묻혀 있습니다. 도달하려면 세 번의 클릭이 필요합니다. 처음에는 괜찮지만 어느 순간 지루해지기 시작하고 흐름을 방해합니다.

Storybook을 사용하면 구성 요소를 원하는 방식으로 정확하게 렌더링하는 스토리가 있습니다. 핫 리로딩이 포함되어 있습니다.

한 번에 모든 상태

하나의 특정 속성 집합뿐만 아니라 구성 요소를 표시하는 방법은 무엇입니까? Storybook을 사용하면 이것이 자연스럽습니다.

디버깅을 위한 샌드박스

때로는 구성 요소를 분리하여 디버그하고 해킹해야 합니다. Storybook을 사용하면 몇 초 만에 이 작업을 수행할 수 있습니다... 스토리를 아직 작성하지 않은 경우!

구성 요소를 시도하면서 문서화

스토리는 쓰고 폐기하는 코드가 아닙니다. 스토리가 준비되면 커밋하고 코드 베이스의 일부로 만듭니다. 귀하와 귀하의 팀을 위한 훌륭한 리소스가 됩니다.

Storybook을 사랑해야 할 몇 가지 다른 이유가 있습니다. 위의 것들은 내가 가장 좋아하는 것인데, Storybook이 내 React 프로젝트의 100% 일부인 이유입니다.

스토리북 시작하기

빠른! 그것을 설치!

cd your/react/project
npx sb init

이제 시작할 준비가 되었습니다.

npm run storybook

Storybook이 새 탭을 열고 시작 화면을 표시합니다.



설치하는 동안 Storybook은 몇 가지 데모 스토리를 생성합니다. 왼쪽에 있는 "버튼"데모를 클릭하십시오.



둥근 모서리가 있는 파란색 버튼은 데모 구성 요소이지만 귀하의 것 중 하나일 수도 있습니다. 아래 컨트롤 탭을 사용하면 구성 요소를 빠르게 사용할 수 있습니다. 시원한!
src/stories/Button.stories.jsx의 기존 데모 사례를 살펴보십시오.

import React from 'react';

import { Button } from './Button';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Example/Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
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',
};

이 파일에서 코드의 절반은 Storybook과 관련되어 있습니다. 이해하고 기억하도록 선택하거나 새 파일을 시작할 때 복사/붙여넣기 및 적용을 선택할 수 있습니다. 그럴 수 있지. 나머지 절반은 구성 요소에 관한 것입니다. 이 데모에서 size , primary 및 label 또는 Primary , Secondary , Large 및 Small 라는 네 개의 스토리가 필요하다는 사실은 Storybook이 아닌 데모 버튼과 완전히 관련됩니다. 그 자체.
src 어딘가에 파일을 만들고 구성 요소 이름을 따서 이름을 지정합니다. MyComp.stories.jsx , src/stories/Button.stories.jsx의 콘텐츠로 채우고 나만의 이야기를 시작하세요!

결론

유용한 React 도구가 많이 있습니다. 그러나 Storybook은 React가 관련되어 있는 한 프로젝트가 무엇이든 제가 추천하는 유일한 책일 것입니다. 나는 당신이 그것을 시도하도록 확신했기를 바랍니다!

그리고 실제로 첫 번째 이야기를 쓴다면, 제발!