학습한 내용

스토리북

• UI컴포넌트 개발 도구
• 데모용 코드를 작성하는 데 도움을 주고 공통적으로 사용될 컴포넌트를 팀원들과 편리하게 공유하는 도구로 활용
• 구성단위는 스토리 (Story )
• 하나의 UI컴포넌트는 보통 하나 이상의 Story를 가짐

장점

복잡한 로직 없이 독립적인 환경에서 컴포넌트 개발 가능
재사용을 위한 컴포넌트들을 story에서 조합하여 테스트 가능
컴포넌트들을 문서화 할 수도 있고 디자인 시스템에 적용해 피그마의 컴포넌트들과 동기화 할 수 있음

실습

1
Text 컴포넌트
새 폴더를 만들고 프로젝트를 설치한다( VSCode 터미널 창 )
완료 문구( Happy hacking! ) 확인
스토리북 설치( npx –p storybook sb init )
설치가 완료될 때 까지 기다린다
설치가 완료되면 storybook을 구동하는 명령어를 알려준다
그대로 입력하고 구동될 때 까지 기다린다
storybook이 구동된 모습
완료되면 src 폴더 밑에 component 폴더를 만들고
Text.jsx 파일을 만든다
기본 구조
자료형 선언, 필요시 경고문 출력
디폴트값 설정

아직 컴포넌트를 만들었지만 스토리북에 연결된 상태는 아니다

2
Text 컴포넌트 등록
Text.stories.js 파일을 만든다
이 파일은 Text.jsx파일에 스토리를 연결하는 파일이다
스토리 기본 구조
해당 스토리에서 테스트할 인자가 담겨있는 컴포넌트

3
Input 컴포넌트
Input.jsx 파일을 만든다


여러가지 type 부여, 자료형 한정

4
Input 컴포넌트 등록

코드 작성을 완료했으면 다시 storybook으로 돌아가 결과를 확인한다

Input-label
Text-Default
Text-Red
Text-Italic
Text-Underline

어려운 내용

해결방법

학습소감

오늘은 React의 한 부분인 storybook에 대해 배우고 실습하였다
이론부터 설치, 구동, 코딩까지 어느 하나 쉬운 과정이 없었다
처음 작성해보는 코드 방식이기도 하고, 터미널 창 명령어를 이용하는
게 생소하기도 하였다