반응형
SMALL
CRA + storybook
-
Storybook 컴포넌트 만들기 2프론트엔드 2023. 4. 18. 10:46
저번 포스팅에서 Storybook을 이용해 Task 컴포넌트를 생성했습니다. 이번 포스팅에서는 이 Task 컴포넌트를 여러개 생성하여 TaskList 컴포넌트를 만들어보겠습니다. 1. TaskList의 스토리 DEFAULT - 일반 Task들의 리스트입니다. PINNED - 핀으로 고정된 Task들이 있을 경우 해당 Task를 일반 Task보다 위에 위치하도록 해줘야 합니다. Empty - TaskList가 비어있는 경우입니다. LOADING - Task가 비동기식으로 전달 될 경우 연결이 없는 상태를 렌더링해줍니다. 2. TaskList story 구성 우선 story default export에서 내보낼 TaskList 컴포넌트를 구현만 해줍니다. function TaskList() { return ..