Storybook

Storybook은 React 컴포넌트를 위한 UI 개발 환경입니다. 이를 통해 UI 컴포넌트의 다양한 상태 시각화 또는 인터랙티브 스타일로 개발 할 수 있습니다. Storybook은 앱 외부에서 실행되므로, 앱 모듈 종속성에 대해 걱정하지 않고 UI 컴포넌트를 독립적인 환경에서 개발할 수 있습니다.

• UI 컴포넌트 개발 도구
• 컴포넌트의 문서화
• 웹 애플리케이션 환경과 독립된 환경에서의 컴포넌트 실행

도입 배경

배경

• 대부분의 컴포넌트는 재사용을 하게 될 텐데…. → 컴포넌트 문서화에 대한 필요성을 느낌

결과

• 문서를 보고 컴포넌트들을 쉽게 파악 가능해짐
• 컴포넌트 단위의 UI 개발이 편해짐

장점

• 시각적인 테스트가 굉장히 편리함

• 독립된 환경에서 컴포넌트 테스트가 가능

  • 컴포넌트의 스타일을 변경하고, 이를 확인하고 싶은데….?

  • 로그인을 해야 되네?

    →

  1. 테스트용 환경을 새로 만들고….

  2. 스타일 수정 → 로그인 → 확인 → 재수정 → 로그인 → 확인

     → 너무 번거롭다!

• 다양한 확장 플러그인

Storybook 적용해보기

Storybook 설치

# storybook 설정
npx storybook init