[React] Storybook

스토리북

• UI 컴포넌트를 모아서 문서화하고 보여주는 오픈소스툴이다. (Storybook is an open source tool for building UI components and pages in isolation.)
• 개발자는 컴포넌트를 스토리북에 등록해놓을 수 있고, 어떤 컴포넌트가 있는지 확인 할 수 있다.

StoryBook 설치하기

• 우선 리액트를 생성한다.

npx -p @storybook/cli sb init

• 설치가 완료 되면 package.json에 아래와 같이 추가된것을 확인 할 수 있다.

  "scripts": {
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.5.16",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",
    "babel-plugin-named-exports-order": "^0.0.2",
    "prop-types": "^15.8.1",
    "webpack": "^5.75.0"
  }

Storybook 실행하기

yarn storybook

• 6006포트로 스토리북이 실행된다.

리액트(React)를 위한 스토리북(Storybook) 튜토리얼
Storybook 소개 / 기본 사용법