Storybook 이용해보기!

이한형·2022년 5월 14일
1

Storybook 이란?

Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구입니다.

Storybook을 사용하면 실제 웹 어플리케이션의 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능합니다.

그 외에도 컴포넌트의 문서화 도구로도 사용이 가능합니다.

Storybook 적용해보기

스토리북 설치

npx -p @storybook/cli sb init

Webpack5 스토리북 적용

npx sb init --builder webpack5
yarn add -D dotenv-webpack

Storybook 실행

yarn storybook

컴포넌트 조작

아래의 props를 입력하는 세션에서 컴포넌트들을 테스트해볼 수 있습니다.

Storybook 컴포넌트 작성

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: "안녕하세요" };

Docs 작성

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/

profile
풀스택 개발자를 지향하는 개발자

0개의 댓글