React Storybook - 1. Storybook 시작하기

Storybook 이란?

• UI component를 위한 개발 환경과 Playground
• 컴포넌트를 독립적으로 생성해준다.
• 격리된 개발 환경에서 이러한 컴포넌트를 대화식으로 보여준다. => react 어플리케이션의 외부에서 돌아간다.
  • 개발된 컴포넌트들이 어떻게 다른 Props를 가지는지 보여준다.
  • 동적으로 Props나 Accessibility score를 바꿔준다.

Storybook 시작하기

1. npx create-react-app react-story-v6
2. npx sb init => Add Storybook
   

   

   - npm run storybook / npm build-storybook : development mode에서 storybook 실행/ storybook 빌드
   - main.js : storybook의 configuration file
   - preview.js : 내가 작성한 story의 configuration file
   - stories/~.stories.mdx: storybook의 landing page
   - stories/~.js : component
   - stories/~.stories : component와 연관이 있는 story를 모아놓은 파일. story를 export 한다.
3. npm run storybook : component의 landing page들을 볼 수 있다.