[React] Storybook

Storybook 기본 설정

react 프로젝트 생성

yarn create react-app <프로젝트명>

Storybook 설치

npx -p @storybook/cli sb init

Storybook 실행 후 설치 확인

yarn storybook

config.js 설정 변경

• 경로 : <프로젝트>/.storybook/config.js
• <프로젝트>/src/components 하위 디렉토리에서 *.stories.js 파일을 찾아 로딩하는 설정

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

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

function loadStories() {
    req.keys().forEach(filename => {
        req(filename)
    })
}

configure(loadStories, module);

Input.js 코드 추가

• 경로 : <프로젝트>/src/components/Input/Input.js

import React from 'react'

const Input = (props) => (
    <input {...props}/>
)

export default Input;

Input.stories.js 코드 추가

• 경로 : <프로젝트>/src/components/Input/Input.stories.js

import React from 'react';

import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';

import Input from './Input';

storiesOf('Input', module)
    .addDecorator((story) => <div style={{margin: '50px'}}>{story()}</div>)
    .add('default', () => <Input onChange={action('changed')}/>)
    .add('disabled', () => <Input disabled/>);

Storybook 실행 후 확인

yarn storybook

Storybook 배포하기

빌드하기

yarn build-storybook

빌드 결과물 배포

• 빌드 결과물 경로 : <프로젝트>/storybook-static

[이슈] storybook 실행시 아래 로그 발생

• 비정상 로그

  • info @storybook/react v5.0.11 info info => Loading presets info => Loading presets info => Using default webpack setup. info => Using base config because react-scripts is not installed.

• 정상 로그

  • info => Loading presets info => Loading presets info => Loading custom addons config. info => Using default webpack setup. info => Loading create-react-app config.

• 비정상 로그 발생시 webpack.config.js를 로딩하지 못하여 올바르게 작동하지 못함

  • ex)
    • yarn start를 통해서는 CSS Module이 올바르게 동작함
    • yarn storybook에서는 CSS Module이 올바르게 동작하지 않음

• react-scripts 모듈을 설치하여 해결

  yarn add react-scripts
  

참고

• https://storybook.js.org/docs/guides/quick-start-guide/
• https://hyunseob.github.io/2018/01/08/storybook-beginners-guide/