리액트 컴포넌트, StoryBook

컴포넌트 개별로 확인하는 법
isolation

storyBook

소개

UI 컴포넌트 개발 및 문서화에 가장 인기 있는 도구로 UI 컴포넌트를 다양한 상태 시각화와 인터랙티브한 스타일로 개발 할 수 있다. storybook은 앱 외부에서 실행되므로, 앱 모듈 종속성에 대해 걱정하지 않고 컴포넌트를 독립적인 환경에서 개발할 수 있다.

설치

//React 앱 프로젝트 설치/초기화
npx create-react-app <프로젝트> && cd $_

// Storybook 설치/초기화
npx sb@latest init

// Storybook 업그레이드
npx sb@next upgrade

스토리 북 구성

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

pnpm dlx storybook@latest init
이 뒤에 react나 html 등을 붙이면 환경 설정이 됨