> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/story-book/undefined-2.md).

# 스토리북 프로젝트

스토리북으로 작업을 하기전 어떻게 구조를 짤 것인지, 어떻게 상태 관리를 설정하는지 설계가 필요하다. 

{% embed url="<https://github.com/yamoo9/Coupang-RSF>" %}

## 1. 설계&#x20;

위의 쿠팡 예제로 큰 그림을 그려보자.&#x20;

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW4uFDNzmdS2f4ceiMA%2F-MW4xEgCkUFo-idKlpJN%2Fimage.png?alt=media\&token=e98d77f6-045f-46a4-8366-69754fca13ab)

| 구분        | 설명                                                                        |
| --------- | ------------------------------------------------------------------------- |
| Component | <ul><li>상태를 가지지 않는다</li><li>순수하게 하나의 기능을 하는 컴포넌트를 생성한다. </li></ul><p></p> |

Components&#x20;

* 상태를 가지지 않는다.&#x20;
* 어디서든 재사용이 가능하도록 여러 설정을 하지 않는 순수한 컴포넌트를 생성한다.&#x20;

![컴포넌트의 각 상태 ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW4uFDNzmdS2f4ceiMA%2F-MW4yVJ7pQit46p3OvCP%2Fimage.png?alt=media\&token=48548aa0-142f-47f1-a985-51a15356bf18)

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW4uFDNzmdS2f4ceiMA%2F-MW4y48cWYjjso-9mT0y%2Fimage.png?alt=media\&token=c6fee54f-2f59-434f-8918-c502fbc11aa4)

Containers&#x20;

* &#x20;컴포넌트를 조합하여 하나의 작은 덩어리를 만든다.&#x20;
* 상태를 설정하여 사용자의 동작에 따라 컴포넌트가 변하게 한다.&#x20;

![Input, Button, Checkbox 등 컴포넌트를 조합한다. ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW4uFDNzmdS2f4ceiMA%2F-MW4ypvieVouXcGeMqST%2Fimage.png?alt=media\&token=658dde6b-4a3d-4204-a828-10bf05cfcef7)

Page&#x20;

* &#x20;Container를 가져와서 사용자에게 보여질 페이지를 만든다.&#x20;

![쿠팡 로그인 페이지 ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW4uFDNzmdS2f4ceiMA%2F-MW4zJ5OQvKgHm1khzCo%2Fimage.png?alt=media\&token=6d2e18b0-f7f3-40e2-8b88-b46b0c74b8f8)