Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구입니다.
Storybook을 사용하면 실제 웹 어플리케이션의 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능합니다.
그 외에도 컴포넌트의 문서화 도구로도 사용이 가능합니다.
스토리북 설치
npx -p @storybook/cli sb init
npx sb init --builder webpack5
yarn add -D dotenv-webpack
yarn storybook
아래의 props를 입력하는 세션에서 컴포넌트들을 테스트해볼 수 있습니다.
src/component/title.tsx
export interface props {
text?: string;
}
const Title = ({ text }: props) => <div>{text}</div>;
export default Title;
src/stories/Title.stories.tsx
import { Meta, Story } from "@storybook/react";
import Title, { TitleProps } from '../component/Text';
export default {
title: "Components/Title",
component: Title,
} as Meta
const Template: Story<TitleProps> = (args) => <Title {...args}/>;
export const Basic = Template.bind({});
Basic.args = { text: "안녕하세요" };
storybook을 이용해 문서화를 할 수 있습니다.
문서화를 통해 다른사람이 봤을때 좀 더 이해가 쉽게 할 수 있겠죠
import React from 'react';
export interface TitleProps {
/**
* props 설명
*/
text?: string;
}
/**
* Title 컴포넌트
*
* - 컴포넌트 설명
*/
const Title = ({ text }: TitleProps) => {
return <div>{text}</div>;
}
export default Title
이 외에도 스토리북에는 많은 기능이 있으니 한번 살펴보시면 좋을 것 같습니다~
https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/