반응형
SMALL
storybook 튜토리얼
-
Storybook 컴포넌트 만들기 1프론트엔드 2023. 4. 17. 18:59
이전 포스트에서 Storybook 설정 및 배포 방법에 대해 알아보았습니다. 이번 포스트에서는 컴포넌트의 상태를 설정하여 스토리를 구성하고 테스트하는 과정을 살펴보도록 하겠습니다. 이번 포스트는 React + Storybook를 레퍼런스로 하고 있습니다. 1. Task 컴포넌트 만들기 Task는 체크박스, 정보, 위아래로 움직일 수 있도록 해주는 pinned이 있습니다. Task의 상태는 TASK_INBOX, TASK_PINNED, TASK_ARCHIVED가 있습니다. 이를 위해 정의된 props는 아래와 같습니다. title - task를 설명해주는 문자열 state - 현재 어떤 task가 목록에 있으며, 선택되어 있는지의 여부 Task 컴포넌트는 아래와 같이 정의해줍니다. import { TaskT..