Storybook이란? Storybook 주요 기능, Storybook 설치, 사용법

 

Storybook이란?

➥ CDD (Component Driven Development)를 하기 위한 도구

 

각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 👉 전체 UI를 한눈에 보고 개발 가능!

 

주요 기능

• UI 컴포넌트들을 카탈로그화하기
• 컴포넌트 변화를 Stories로 저장하기
• 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
• 리액트를 포함한 다양한 뷰 레이어 지원하기

 

장점

1. 컴포넌트 문서화 👉 재사용성 확대

2. 자동으로 컴포넌트 시각화 👉 시뮬레이션 할 수 있는 다양한 테스트 상태 확인 가능 👉 버그 사전에 차단 가능

3. 테스트 및 개발 속도 개선

 

 

 

 

---

Storybook 설치 방법

// 리액트 프로젝트를 다운받았다는 가정 하에,

npx storybook init

Storybook 설치가 완료되면,

/.storybook 폴더와 /src/stories 폴더가 생성된 것을 확인할 수 있다.

/.storybook 폴더에는 Storybook 관련 설정 파일이, /src/stories 폴더에는 Storybook 예시 파일들이 들어있다.

 

 

Storybook을 실행 방법

npm run storybook

=> localhost:6006으로 접근하여 Storybook을 실행시킨다.

 

 

주의!

Storybook에서 Styled Components 를 사용한다면 

npm install --save styled-components

Styled Components 를 사용한다면 새롭게 설치해주어야 한다!

import styled from "styled-components"

Import Styled Components 도 잊지 말기!!

 

 

---

 

참고)

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/simple-component/

https://storybook.js.org/

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓