💻 Storybook

(localhost:6006)

📝 개념

하나의 개발환경이자 UI컴포넌트를 테스트할 수 있는 플레이그라운드

• 리액트 애플리케이션 밖에서 동작하므로 리액트 애플리케이션내의 비즈니스로직을 신경쓰지 않는다.
• 비즈니스로직과 분리하여 UI만 독립적으로 테스팅이 가능하다.

⭐ 팀단위로 개발시 유용한 점

1) 이미 개발된 다양한 컴포넌트를 볼 수 있게 해준다.
2) 컴포넌트들이 받는 props룰 확인 할 수있다.
3) props들을 동적으로 바꾸고 즉시 확인 가능하다.

설치

리액트 프로젝트 생성 후 터미널에 명령어 입력

npx sb init

storybook 폴더가 생성된 것을 확인

main.js : 스토리북애플리케이션 자체에 대한 설정이 담겨있음
preview.js: 우리가 작성한 스토리들에 대한 설정

실행

터미널에서

npm run storybook

❗ localhost:6006에서 에러발생시 package.json에서 @test어쩌구들 지우기(uninstall)

Story 작성

• Story 작성 시 필요한 파일이 3개가 있다.
  ㅇ 컴포넌트 파일 (ex: Button.js)
  ㅇ 버튼 컴포넌트와 관련된 스타일이 작성된 파일 (ex: Button.css)
  ㅇ 컴포넌트와 일치하는 스토리 파일 (ex: Button.stories.js)
  

• Canvas tab: 컴포넌트 개발환경
• Docs tab: 컴포넌트 문서를 보여준다.