스토리북 프로젝트

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

LogoGitHub - yamoo9/Coupang-RSF: 쿠팡! (React + Storybook + Figma)GitHub

1. 설계

위의 쿠팡 예제로 큰 그림을 그려보자.

구분

설명

Component

  • 상태를 가지지 않는다

  • 순수하게 하나의 기능을 하는 컴포넌트를 생성한다.

Components

  • 상태를 가지지 않는다.

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

컴포넌트의 각 상태

Containers

  • 컴포넌트를 조합하여 하나의 작은 덩어리를 만든다.

  • 상태를 설정하여 사용자의 동작에 따라 컴포넌트가 변하게 한다.

Input, Button, Checkbox 등 컴포넌트를 조합한다.

Page

  • Container를 가져와서 사용자에게 보여질 페이지를 만든다.

쿠팡 로그인 페이지
PreviousViewportNext글로벌 스타일 적용

Last updated

Was this helpful?