Storybook - React, Vue 및 Angular용 UI 구성 요소 개발 도구(React에 초점을 맞춘 기사)

Storybook은 UI 구성요소를 위한 UI 개발 환경입니다. 이를 통해 UI 구성 요소의 다양한 상태를 시각화하고 대화형으로 개발할 수 있습니다. 구성 요소를 신속하게 시각화하고 상호 작용할 수 있다는 것은 매우 유용합니다.

Storybook을 사용하면 UI 테스트에 이러한 React 구성 요소를 쉽게 활용할 수 있습니다.

React 구성 요소를 만든 후에는 스타일을 추가하고 구성 요소가 다른 데이터 세트로 어떻게 렌더링되는지 테스트해야 합니다. 데이터를 구성 요소에 전달할 수 있으며 Storybook 구성 요소가 자체적으로 렌더링됩니다.

이는 데이터가 없거나("결과 없음"메시지가 표시될 수 있음) UI를 엉망으로 만들 수 있는 긴 콘텐츠와 같은 특별한 경우에 유용할 수 있습니다. Storybook 테스트를 사용하면 데이터베이스의 테스트 데이터를 조작하거나 구성 요소에 하드코딩하는 등의 작업 없이 이러한 UI 사례를 테스트할 수 있습니다.

시작하다

Storybook은 개발 모드에서 앱과 함께 실행됩니다. 앱의 비즈니스 논리 및 컨텍스트와 격리된 UI 구성 요소를 빌드하는 데 도움이 됩니다.

React Storybook 설정

React Storybook을 설정하려면 가장 먼저 필요한 것은 React 프로젝트입니다. 현재 적합한 것이 없다면 create-react-app 를 사용하여 쉽게 만들 수 있습니다.

Storybook을 시작하는 가장 쉬운 방법은 getstorybook 도구를 사용하는 것입니다. 이 도구는 앱을 스캔하고 storybook이 작동하는 데 필요한 (작은) 변경을 수행하는 CLI입니다. 다음과 같이 사용할 수 있습니다.

npm i --save-dev @storybook/react

cd [your-app]
getstorybook

참고: 내 npm 프로젝트 내에서 실행getstorybook 명령과 관련된 몇 가지 문제를 발견했기 때문에 내 프로젝트에서 Yarn 패키지 관리자를 사용합니다.
getstorybook는 .storybook/ 및 config.js 파일을 포함하는 addons.js라는 반응 앱에 폴더를 추가합니다. 이 파일은 스토리북의 "진입점"이며 여기에서 모든 구성 요소에 대한 스토리가 포함된 각 파일을 요구해야 합니다. 기본값은 stories/index.js라는 파일에서 시작하는 것이지만 사용자 정의할 수 있습니다.

Storybook을 실행하려면 yarn run storybook를 실행하고 표시된 주소( http://localhost:9009/ )를 엽니다. 앱은 다음과 같아야 합니다.

새로운 이야기 쓰기

구성

우리는 이야기가 Storybook의 어디에 있는지 .storybook/config.js에게 알려야 합니다.

import { configure} from '@storybook/react';

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
   req.keys().forEach(path => req(path)); // customized stories path
}

configure(loadStories, module);

직접 스토리 경로이거나 정규식과 일치하는 모든 파일을 가져오는 사용자 정의된 스토리 경로일 수 있습니다/\.stories\.js$/.

간단한 이야기

환영 텍스트만 포함하는 간단한 welcome.js 구성 요소를 작성합니다.

import React, { Component } from 'react'

export default class Welcome extends Component {

 render() {
   return (
     <div>
       <h1>{this.props.message}</h1>
     </div>
   )
 }
}

간단한 welcome.stories.js 스토리 만들기.

import React from 'react';
import { storiesOf } from '@storybook/react';
import Header from '../components/Welcome';

const stories = storiesOf('Welcome', module);

stories.add('welcome message', () => (

   <Header
     message="Welcome to Storybook!"
   />

));

스토리북은 이렇게 생겼습니다.

애드온

Storybook은 그 자체로 매우 유용하지만 상황을 개선하기 위해 여러 애드온도 있습니다. 이 기사에서는 그 중 일부만 다룰 것이지만 나중에 official list을 확인하십시오.

참고: 애드온 버전은 Storybook 버전과 호환되어야 합니다.

storybook-addon-jsx

이 Storybook 애드온은 스토리의 JSX를 보여줍니다. 예를 들어 어떤 소품을 설정했는지 확인하는 것이 유용할 수 있습니다.

yarn add -D @storybook/addons

yarn add -D storybook-addon-jsx

설치 후 .storybook/config.js에서 전역적으로 구성해야 합니다.

import { configure} from '@storybook/react';
import JSXAddon from 'storybook-addon-jsx';

setAddon(JSXAddon);

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
   req.keys().forEach(path => req(path)); // customized stories path
}

configure(loadStories, module);

이제 .add를 .addWithJSX로 교체해야 합니다.

stories.addWithJSX('welcome message', () => (

   <Header
     message="Welcome to Storybook!"
   />

));

Storybook Addons 섹션은 다음과 같습니다.

@storybook/addon-knobs

Storybook Addon Knobs를 사용하면 Storybook UI를 사용하여 React 소품을 동적으로 편집할 수 있습니다. Storybook의 스토리 내에서 노브를 동적 변수로 사용할 수도 있습니다.

yarn add -D @storybook/addon-knobs

이제 .addDecorator(withKnobs) 에서 노브를 사용하려면 welcome.stories.js 를 추가해야 합니다.

import React from 'react';
import { storiesOf } from '@storybook/react';
import Header from '../components/Welcome';

import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';

const stories = storiesOf('Welcome', module);

stories.addDecorator(withKnobs).add('welcome message', () => (

   <Header
     message={text('headline','Welcome to Storybook!')}
   />

));

Storybook Addons 섹션은 다음과 같습니다.



이 애드온을 사용하기 전에 이 플러그인을 .storybook/addons.js 파일에 등록해야 합니다(일부 특정 애드온은 이렇게 등록할 필요가 없습니다. 각 애드온에 대한 자세한 내용은 NPM site을 참조하십시오).

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';
import 'storybook-addon-jsx/register';

다른 애드온은 거의 없습니다.

storybook-addon-scissors

Storybook Info Addon