storybook

기본 설정

npm init

프로젝트를 먼저 생성한 후, storybook와 react패키지등을 설치한다.

npm i --save-dev @storybook/react
npm i --save react react-dom
npm i --save-dev @babel/core
npm i --save-dev babel-loader

package.json 에 실행을 위한 명령어를 추가한다.

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}

.storybook/config.js 파일을 아래와 같이 작성한다. (디렉토리가 없을경우 생성해준다)

import { configure } from '@storybook/react'; 
function loadStories() {
 require('../stories/index.js'); // You can require as many stories as you need.
} 
configure(loadStories, module);

stories/index.js 파일을 아래와 같이 작성한다. (디렉토리가 없을 경우 생성해준다)

import React from 'react'; 
import { storiesOf } from '@storybook/react'; 
import { Button } from '@storybook/react/demo'; 

storiesOf('Button', module)
 .add('with text', () => (
 <Button>Hello Button</Button>
 ))
 .add('with some emoji', () => (
 <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
 ));

이후

npm run storybook

을 통해 실항할 수 있다.
출처 : https://storybook.js.org/docs/basics/guide-react/

액션 애드온 사용하기

npm i -D @storybook/addon-actions

애드온을 설치해 준 후 .storybook/addons.js 파일을 아래와 같이 작성한다.

import '@storybook/addon-actions/register';

이후 아래와 같이 스토리보드에서 onClick에 action을 사용하면 스토리보드의 액션창에서 로그를 볼 수 있다.

import { storiesOf } from '@storybook/react';
import { action, configureActions } from '@storybook/addon-actions';
 
import Button from './button';
 
storiesOf('Button', module).add('default view', () => (
  <Button onClick={action('button-click')}>Hello World!</Button>
));

출처 : https://hyunseob.github.io/2018/01/08/storybook-beginners-guide/

styled-jsx 사용하기

styled-jsx를 직접 사용하는 방법으론 성공하지 못했다.

npm install next

다만 위의 명령어와 같이 next.js 를 설치하면 내장된 styled-jsx를 사용할 수 있다.
next.js만 설치한 후 아래와 같이 컴포넌트를 만들면 바로 스토리북에서도 볼 수 있다.

import React from 'react'
 
const Card = (props) => (
 <>
 <div className="item" {...props}>aaaa</div>
 <style jsx>{`
 .item {
 background:pink;
 }
 `}</style>
 </>
)
 
export default Card

설치하면 작업하기 좋은 VSCode Extension

• vscode-styled-jsx
• styled-jsx Language Server (scss버전도 별도로 있음)

CreateReactApp 으로 만든 프로젝트에 적용

CRA 버전2를 기준으로 생성되있는 프로젝트에 스토리북을 붙이려면

npm i --save-dev @storybook/react
npm i -D @storybook/addon-actions

만 설치해주면 된다.
styled-jsx나 babel등은 이미 다 설치가 되있으므로, 위의 두 패키지만 설치하고,
순서대로 필요한 파일들을 생성해주면 기존 CRA 2.x 프로젝트에 스토리북을 적용할수 있다.