[Storybook] 스토리북에 대해 알아보자

안녕하세요, Einere입니다.

(광고 차단 기능을 꺼주시면 감사하겠습니다.)

---

이번 포스트에서는 Storybook이라는 툴에 대해 알아보도록 하겠습니다.

 

Storybook이란?

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Storybook은 React나 Vue, Angular를 위한 고립된 환경에서 컴포넌트 UI 개발을 위한 오픈소스 툴입니다.

React의 철학 중 하나가 "고립된 컴포넌트를 이용해 재사용성을 높이는 것"임을 생각하면, 꽤나 잘 어울리는 설명이라고 생각합니다.

사실 저는 페이지 구성 요소를 컴포넌트 단위로 쪼개는 것은 익숙하지만, 재사용성이 높은 고립된 컴포넌트로 만드는 것에는 미숙합니다. 비즈니스 로직이야 커스텀 훅으로 뺀다고 해도, 마크업이나 스타일이 조금 골치가 아프죠.

어찌됬건, Storybook을 이용해서 여러가지 컴포넌트 개발에 도움이 된다는 것이 중요합니다.

 

Storybook의 특징

강력한 UI 제공

Storybook provides a sandbox to build UI components in isolation so you can develop hard-to-reach states and edge cases.

Storybook은 고립된 환경에서 UI 컴포넌트를 빌드하기 위해, 샌드박스를 제공합니다. 따라서 여러가지 상태나 상황들을 설정하여 개발을 할 수 있습니다.

 

고립된 환경에서 UI 컴포넌트 개발

컴포넌트 개발을 하기 위해 복잡한 데이터나 비즈니스 로직을 구축하지 않아도 됩니다.

 

어려운 유스 케이스를 모킹

앱에서 재현하기 어려운 상태의 컴포넌트를 렌더링할 수 있습니다.

 

유스케이스를 스토리로 저장

특정 유스케이스를 스토리로 저장하여 개발이나 테스트, QA에 써먹을 수 있습니다.

 

신뢰성 있는 컴포넌트 전달

Storybook makes it easy to keep track of edge cases and as a result you get tests for free.

Storybook은 엣지 케이스를 추적하기 쉽게 만들어줍니다.

 

일관적인  UX를 보장

스토리를 이용해 가시적인 스펙을 손쉽게 만들 수 있습니다.

 

코드 복원 자동 탐지

공식 애드온인 Storyshot을 이용하여 코드 스냅샷 테스트를 받을 수 있습니다.

 

컴포넌트에 대한 유닛 테스트

유닛 테스트를 위해 스토리를 재사용 할 수 있습니다.

 

매 커밋마다 UI 변경을 잡아라

시각 테스트 툴을 이용해 UI 변경점을 쉽게 확인할 수 있습니다.

 

Storybook 맛보기

Storybook 설치

$ create-react-app storybook-playground --template typescript

먼저, CRA를 이용해 리액트 디렉토리를 만들어줍니다.

 

$ npm i @storybook/cli

그 다음, 스토리북 CLI를 설치합니다.

 

만약 TypeScript와 함께 사용한다면 설정에 두가지 선택지가 있습니다.

1. ts-loader를 사용하는 방법
2. babel-loader를 사용하는 방법

저는 ts-loader를 사용해볼게요. 자세한 내용은 TypeScript Config를 참고해주세요.

 

$ npm install -D @storybook/preset-create-react-app
$ npm i -D typescript
$ npm i -D ts-loader
$ npm i -D @storybook/addon-info react-docgen-typescript-loader # optional but recommended
$ npm i -D jest "@types/jest" ts-jest #testing

만약 CRTS를 사용중이라면 위 라이브러리도 추가해줍니다.

 

그리고 .storybook/main.js를 다음과 같이 수정합니다.

module.exports = {
  ...
  stories: ['../src/**/*.stories.tsx'],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
  ...
};

웹팩 설정 객체에다가 ts-loader를 삽입하는 코드인 것 같네요. ㅎㅎ

 

$ getstorybook

위 명령어로 프로젝트에 Storybook을 설치하면 됩니다. 자동으로 의존성 및 스크립트, 필요한 폴더 및 파일을 추가해줍니다.

 

getstorybook을 실행한 후

그러면 위와 같이 package.json에 Storybook 관련 스크립트가 추가됩니다.

 

Storybook 실행

$ npm run storybook

위 명령어로 스토리북을 실행할 수 있습니다.

 

로컬 환경으로 Storybook을 실행한 화면

로컬 환경으로 접속한 스토리북 페이지입니다.

 

컴포넌트 만들기

src/component/Tomato.tsx를 만들어 Tomato컴포넌트를 만들어보겠습니다.

import * as React from 'react';
import {useMemo, useState} from "react";

enum Color {
    green = 'green',
    red = 'red',
}

export const Tomato: React.FunctionComponent = function () {
    const [color, setColor] = useState(Color.green);

    function handleClick() {
        switch (color) {
            case Color.green: {
                setColor(Color.red);
                break;
            }
            case Color.red: {
                setColor(Color.green);
                break;
            }
            default: {
                setColor(Color.green);
                break;
            }
        }
    }

    const style = useMemo(() => {
        const myStyle = {
            backgroundColor: 'green'
        };

        switch (color) {
            case Color.green: {
                myStyle.backgroundColor = Color.green;
                break;
            }
            case Color.red: {
                myStyle.backgroundColor = Color.red;
                break;
            }
            default: {
                myStyle.backgroundColor = Color.green;
                break;
            }
        }
        return myStyle;
    }, [color]);

    return (
        <div onClick={handleClick} style={style}>
            i'm {color} tomato!
        </div>
    );
};

 

스토리 만들기

새로운 컴포넌트를 테스트하기 위해, 스토리를 만들어 보겠습니다.

 

Tomato 스토리

네이밍 컨벤션에 따라, 2-Tomato.stories.js로 했습니다.

 

import * as React from 'react';
import {Tomato} from "../component/Tomato/Tomato";

export default {
    title: 'Tomato',
    component: Tomato,
};

export const TomatoTest = () => <Tomato/>;

 

Storybook을 실행해 주시면 다음과 같이 됩니다.

잘 작동하네요!

 

Storybook 활용

UI 컴포넌트 개발 및 테스트

Storybook은 유스케이스 별로 스토리를 만들고, 관련된 컴포넌트들을 여러개 넣을 수 있습니다.

따라서 UI 컴포넌트를 개발하고 테스트할 때 유용하게 사용할 수 있습니다.

 

UI 컴포넌트 문서화

스토리로 묶여진 컴포넌트들은 그 자체로도 문서라고 할 수 있습니다.

스토리를 정적 앱으로 만들어 서로 공유해서 볼 수 도 있으며, Docs라는 애드온을 이용하여 문서화할수도 있습니다.

정적 앱(Static App)으로 익스포팅 하는 방법은 Exporting Storybook as A Static App을 참고해주세요.

이 문서를 디자이너와 개발자, QA팀 등과 회의를 할 때 유용하게 사용할 수 있습니다.

 

디자인 시스템 구축하기

당연하게 UI 컴포넌트들을 만들어 보여줄 수 있으므로, 이를 이용해 디자인 시스템을 구축할 수 있습니다.

각 기능 혹은 태그별로 스토리를 만들고, 포함되는 컴포넌트들을 등록하면 됩니다.

이렇게 모아놓은 컴포넌트들을 테스트해보고 비교해보면서 일관성 및 편의성, 접근성을 확인할 수 있습니다.

 

참고

https://storybook.js.org/docs/basics/introduction/

https://storybook.js.org/docs/basics/introduction/

https://velog.io/@wlsdud2194/Storybook-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0-1

Storybook 작성하기 #1 - 개요

https://medium.com/@benjaminwoojang/storybook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-test-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-65bbe6c453b5

Storybook을 이용한 React Test 환경 구축하기

https://velog.io/@velopert/design-system-using-typescript-and-storybook

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기