Storybook - 소개 및 설치 (1)

이번 포스트부터는 Storybook이란 툴에 대해서 알아볼까 합니다.

현재 제가 참여하고 있는 프로젝트에서 Storybook을 사용하고 있으며, 이번 포스트에서는 간단하게 설치 및 컴포넌트를 만들어 Storybook을 사용하는 과정에 대해서 소개하겠습니다.

Storybook 이란?

단어로 봤을때는 사실 잘 모르겠습니다. 다양한 Story를 모아놓은 Book? 뭐 이렇게 해석될 수 있겠지만 Storybook은 사실 UI 컴포넌트 개발에 사용되는 도구입니다. 또한 다양한 방법으로 활용할 수 있어 상당히 매력적인 UI 개발도구라 할 수 있습니다.

Storybook 설치하기

주로 yarn을 사용해서 설명을 하도록 하겠습니다. 먼저 Storybook 프로젝트를 생성해 봅시다.

$ mkdir my-storybook-test
$ cd my-storybook-test
$ yarn init -y #또는 npm init -y
$ npx -p @storybook/cli sb init —type react

설치가 완료되었다면 Storybook을 실행해 봅니다. yarn storybook 또는 npm run storybook 명령어를 터미널에 입력하고 실행합니다. 명령어가 실행되면 local에서 Storybook 서버가 작동되고 Storybook 화면이 활성화 됩니다.

기본 stories 에서 스토리 파일을 관리하는데 간혹 컴포넌트 소스관리를 위해 경로를 바꿔야하는 경우가 있습니다.

예를 들어 react의 컴포넌트를 관리하는 폴더가 존재하고 각가의 컴포넌트명 폴더에서 stories 파일을 관리하기를 원한다면 기본 관리 경로를 변경해 주어야 합니다.

생성된 .storybook 폴더에서 config.js 파일을 열어 경로를 수정해 봅시다.

// .storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

stories: [’../stories/*/.stories.js’] 도 되어있는 부분을 수정해 줍니다. 만약 사용자의 컴포넌트가 src/component 에서 관리되고 있다면 기본 경로를 src/component 로 변경해줍니다.

// .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

src/component 하위의 컴포넌트명 폴더안에 stories 파일을 대상으로 변경하였습니다.

React 컴포넌트 만들기

이젠 React 프로젝트를 만들고 Storybook을 설치해 컴포넌트를 연결해보도록 하겠습니다. 먼저 CRA(create-react-app) 을 이용해 새로운 React 프로젝트를 생성합니다.

$ npx create-react-app my-storybook-react

$ cd my-storybook-reack

React 가 설치되었다면 Storybook을 프로젝트안에 설치해 줍니다.

$ npx -p @storybook/cli sb init

새로운 React 프로젝트가 생성되었다면 컴포넌트를 관리할 디렉터리를 만들어 줍니다.
ex) src/components/

먼저 React 컴포넌트를 components 폴더안에 생성 및 관리하면서 stories 파일또한 같이 관리한다고 가정합니다.

위에서 설명했던 방식으로 stories 파일의 경로를 변경합니다.

./storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

그럼 테스트를 위해 버튼 컴포넌트를 하나 만들고 같은 디렉터리안에 stories 파일또한 같이 생성합니다.

src/components/Button/index.js
src/components/Button/Button.stories.js

먼저 Button 컴포넌트를 작성해 봅시다.

// components/Button/index.js

import React from 'react';

function Button () {
  return (
    <button>Hello!</button>
  );
}

export default Button;

React 에서 사용할 Button 컴포넌트를 하나 만들었습니다.
하지만 아직 app 에 연결하지 않았기 때문에 화면에서는 확인할 수 없습니다.
하지만 Storybook을 이용해 해당 컴포넌트를 Storybooo UI를 통해 확인할 수 있습니다.

먼저 Button.stories.js 파일을 작성합니다.

// components/Button/Button.stories.js

import React from 'react';
import Button from './index';

export default {
  title: 'Button Component',
  component: Button,
};

export const ButtonComponent = () => <Button />;

ButtonComponent.story = {
  name: 'Button',
};

하나씩 설명 드리자면, 먼저 React 기능을 사용하기위해 react 모듈을 불러오고, Storybook에서 사용할 Button 컴포넌트를 불러옵니다.

import React from 'react';
import Button from './index';

Storybook이 실행되면 자동으로 stories.js 파일의 export default 로 설정된 값을 읽어 해당 값을들 표현해 줍니다.

export default {
  title: 'Button Component',
  component: Button,
};

export const ButtonComponent = () => <Button />;

title 은 Storybook UI에서 사용될 Tree 목록 제목이며, 사용할 컴포넌트는 component 옵션에 연결해줍니다.

기본 Storybook 코드를 전부 작성했다면 터미널에서 npm run storybook 으로 Storybook UI 서버를 구동시킵니다.

$ npm run storybook

명령이 실행되면 Storybook 화면이 실행되며, 우리가 생성했던 Button 컴포넌트가 화면에 렌더링 됩니다.



위처럼 화면이 렌더링 되었다면 네! 성공입니다.

다음 포스트에서는 Storybook을 더 잘 활용할 수 있게 도와주는 addon 기능들 몇가지에 대해 알아보겠습니다.