Storybook이란?
UI 개발, 테스트 및 디자인 시스템 문서화를 도와주는 도구
🦕 장점
- 각 컴포넌트를 독립적으로 테스트할 수 있다.
- 독립적인 상황에서 UI를 집중적으로 개발할 수 있다.
- UI 컴포넌트 라이브러리의 문서화를 위해 사용하거나 디자인 시스템을 개발하기 위한 플랫폼으로 사용할수도 있다.
React에서 Storybook 사용하기
Create React App으로 리액트 프로젝트를 만들었다고 가정하고 Storybook 설치하기
🦕 Storybook 설치
Storybook은 프레임워크가 설정된 프로젝트에 설치해야 한다. 빈 프로젝트에서는 작동하지 않는다.
npx storybook init설치 후 .storybook 폴더가 만들어지고, src에도 stories 폴더가 생성된다.
📁 디렉토리 구조
React 프로젝트 폴더는 생략
.
├── 📁.storybook
│ ├── 📄 main.js
│ └── 📄 preview.js
└── 📁 src
└── 📁 stories.storybook 폴더: Storybook 관련 설정 파일
-
main.js: 기본 구성 파일. storybook을 위한 config 설정들이 담겨있다.
내부 주요 필드는 다음과 같다.- stories - main.js를 기준으로 스토리 파일의 위치를 나타냄
- addons - 사용중인 addon 목록
- framework - 로드 및 빌드 프로세스를 돕기 위한 프레임워크별 구성
더 많은 설정은 여기서 볼 수 있다.
-
preview.js: 해당 프로젝트의 모든 story에 글로벌하게 적용될 포맷 세팅하는 곳
src/stories 폴더: Storybook 예시 파일들
🦕 Storybook 실행
로컬에서 Storybook을 시작하면 터미널에 주소를 출력한다.
npm run storybook // localhost:6006🔽 첫 실행 화면
왼쪽 example 카테고리에서 src/stories 폴더 안에 있던 예시 스토리를 확인할 수 있다.
🦕 Story 작성하기
Story는 컴포넌트가 위치하는 폴더에 같이 위치시키는 것이 일반적이다. src 폴더 안에 컴포넌트 코드 및 스토리들의 코드를 관리한다.
먼저 간단한 React 컴포넌트를 하나 만들어서 export 한다.
Title.jsx 파일에 Title 컴포넌트를 만들었다.
import React from 'react';
const Title = ({title, textColor}) => (
<h1 style={{color: textColor}}>{title}</h1>
);
export default Title;그 다음, Title.stories.js 파일을 만들고 Story를 작성한다.
Story를 작성할때는 .stories.js 확장자로 작성한다.
// 컴포넌트 불러오기
import Title from "./Title";
// 어떤 컴포넌트의 문서인지, 어떤 설정을 적용할 것인지 정의함
export default {
title: "Practice/Title",
component: Title,
argTypes: {
// title, textColor 전달인자에는 text 타입이 필요함을 의미
title: { control: "text" },
textColor: {control: "text"}
}
}
// 템플릿 만들기
const Template = (args) => <Title {...args} />
// 새로운 스토리 만들기
export const RedTitle = Template.bind({});
// 만들어준 스토리의 전달 인자 작성
RedTitle.args = {
title: "Red Title",
textColor: "red"
}
// 스토리 하나 더 만들기
export const BlueTitle = Template.bind({});
// 만들어준 스토리의 전달 인자 작성
BlueTitle.args = {
title: "Blue Title",
textColor: "blue"
}export default { ... }컴포넌트, 설정 정의- title: 컴포넌트 이름.
/를 사용해서 카테고리를 나눈다. - component: 스토리로 만들 컴포넌트 작성
- argTypes: 컴포넌트에 필요한 전달인자의 종류, 타입 설정
- title: 컴포넌트 이름.
export const storyName = …새로운 스토리 만들기
또는 템플릿을 사용하지 않고 전달인자를 직접 받는 Story도 작성할 수 있다.
// 템플릿을 사용하지 않고 전달 인자를 직접 받는 스토리
export const StorybookTitle = (args) => {
return <Title {...args} />
}Story를 만들면 왼쪽 사이드바에서 직접 만든 컴포넌트가 생성된것을 확인할 수 있다.
Practice 카테고리 안에 Title 컴포넌트가 생성되었고, 총 3가지 Story가 생성되었다.
✔️ Red Title
✔️ Blue Title
✔️ Storybook Title
아래 패널에서 title과 textColor를 직접 지정할 수 있다.
📌 추가로 참고한 자료
