1.
UI 컴포넌트를 독립적으로 분리해 개별 관리, 테스트를 도와주는 도구

2.
리액트 컴포넌트 트리 구조
- 리액트는 단방향(하향식)데이터 흐름을 가짐
- 상위 컴포넌트에서 하위 컴포넌트로 props를 전달
- 이로 인해 데이터의 흐름을 명확히 알 수 있고 예측
이 가능해짐

3.
Container Component Pattern

4.
리액트의 특성상 props로 연결된 컴포넌트는 키 커플링
이 되어있지만 그렇지 않은 컴포넌트들은 연결된 것이
아니기 때문에 하위 컴포넌트끼리의 데이터 전달이나
상태 변경은 굉장히 번거로움

5.
Redux Pattern

6.
하나의 컴포넌트에서 너무 많은 일을 하는 경우
일일이 상태를 바꿔가며 테스트를 하기에는
많이 번거로움
Ex) 로그인 여부, 데이터 여부, 로딩 상태 등

7.
디자이너
- 프로토타입 전달 후 매 번 앱을 실행시키지 않고
바로바로 피드백이 가능하다.
- 사용자에게 일관된 경험을 제공할 수 있다.
- 개발자와 소통이 쉬워진다.

8.
개발자
- 불필요한 작업을 줄여준다.
- 안정적으로 검증된 코드를 사용할 수 있다.
- 테스트가 쉬워진다.

9.
스토리북에서는 독립적으로 UI 구성 및
페이지를 빌드해서 실시간으로 테스트가 가
능합니다.
Isolation

10.
stories가 생성 되면 스토리북에 등록 할
Button story를 등록해줌
Ex) Button.stories.js

11.
스토리북에서 실시간으로 바뀔 UI의 상태를
타입으로 지정해놓음

12.
스토리북에서 UI 확인과 테스트를 마친 검증된
상태를 하위 컴포넌트에 props로 전달

13.
하위 컴포넌트에서 props로 전달받은 상태를
style에 적용시켜 사용자에게 일관된 UI를 제공