Storybook: Actions, Knobs, Docs addon 소개 및 설치

1. addon이란?

addon은 Storybook의 plugin과 비슷한 역할로 고급 기능을 지원하고 새로운 워크플로우를 제공해준다.

대표적인 addon은 Knobs, Actions, Source, Docs, Viewport, Storyshots, Backgrounds, Accessibility, Console, Links가 있으며 더 자세한 내용은 홈페이지에서 확인 가능하다.

해당 글은 Storybook 5.3 기준으로 작성되었습니다.


이번 글에서는 Actions, Knobs, Docs의 정의와 기본 세팅에 알아 보겠다.

Actions

원래 Actions도 따로 설치를 해야 되는걸로 아는데, 업데이트 되면서 바뀌었는지 storybook을 설치하면 actinos도 같이 설치되어 있다.

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',    '@storybook/addon-links',
  ],
}

package.json

...,
"devDependencies": {
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",    "@storybook/preset-create-react-app": "^3.0.0",
    "@storybook/react": "^5.3.19"
}

만약 설치가 안되어있다면, 아래처럼 입력하면 된다.

$ npm install --save-dev @storybook/addon-actions

설치 후, .sotrybook/main.js에 아래 코드를 추가한다.

module.exports = {
  addons: ['@storybook/addon-actions/register'],
}

우선 storybook에 기본으로 세팅되어 있는 Button을 보자.

src
└─ stories
    ├─ 0-Weclome.stories.js
    └─ 1-Button.sotries.js

버튼을 클릭하게 되면 아래 Actions탭에 clicked한 내용이 뜬다.

actions

더 정확하게는, Actions는 Componenet를 통해 특정 함수가 호출 되었을 때, 어떤 함수가 어떤 parameter를 넣어서 호출되었는지에 대한 정보를 알려준다.


Knobs

Knobs는 component의 props를 스토리북 화면에서 바로 반영시켜주는 것이다.

Knobs 설치

$ npm install --save-dev @storybook/addon-knobs

설치 후, .sotrybook/main.js에 아래 코드를 추가한다.

module.exports = {
  addons: ['@storybook/addon-knobs/register'],
}

실행했던 storybook을 껐다가 다시 키면 Knobs 탭이 추가된 걸 확인할 수 있다.

knobs

아직 기능이 없기 때문에 Knobs 탭에도 아무것도 보이지 않는다.

왜? 이상하게 나는 Knobs를 깔 때마다 에러가 나서 node_modulespackage-lock.json을 지우고 다시 npm install, npm update를 해야 정상적으로 작동된다…

$ rm -rf package-lock.json node_modules
$ npm install
$ npm update
$ npm audit fix

나중에 원인을 알게되면 글에 추가하겠다.


Docs

Docs는 MDX(*마크다운을 jsx와 결합한 파일 형식) 형식으로 문서를 작성할 수 있게 해주며, component의 props와 주석에 기반하여 문서를 자동으로 생성해준다. MDX를 사용하면 마크다운으로 react component를 더 쉽게 문서화할 수 있다.

Docs 설치

$ npm install --save-dev @storybook/addon-docs

설치 후, .sotrybook/main.js에 아래 코드를 추가한다.

module.exports = {
  stories: ['../src/**/*.stories.(js|mdx)'],
  addons: ['@storybook/addon-docs'],
}

storybook을 재실행하면 아래와 같이 Docs 탭이 생긴걸 볼 수 있다.

docs


이제 Actions, Knobs, Docs의 설치했으니, 다음 글에서 사용 방법에 대해 다뤄보겠다.


👆@김민정(howdy-mj)
안녕하세요, 공부한 것을 기록하고 공유하는 걸 좋아하는 프론트엔드 개발자 김민정입니다. 회고록, 일상 및 다른 관심사는 티스토리에 기록하고 있습니다.

GitHubTistory