스토리북 맛보기 #2

스토리북에 대해 간단하게 알아보자


들어가며

지난번 기본적인 컴포넌트 생성에 대해 알려드렸는데요. 이번 글에서는 스토리북에서 생성한 컴포넌트를 조금 더 효율적으로 활용할 수 있도록 도와주는 addons(애드온)에 대해 알아보고자 합니다.

Addons

addon에 대해 알아볼까요?

스토리북을 설치하면 package.json 파일에 기본적으로 @storybook/addon-actions와 @storybook/addon-essentials 가 설치되어있는 것을 보실 수 있는데요.

@storybook/addon-actions를 먼저 설명 드리겠습니다. action을 통해 이벤트 핸들러가 수신한 데이터를 확인할 수 있습니다.

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
    // 단일 이벤트 핸들러 확인
    onClick: { action: 'clicked' },
  },
};

// 또는
import { actions } from '@storybook/addon-actions';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
    // 다중 이벤트 핸들러 확인
    ...actions('onClick', 'onMouseOver'),
  },
};

@storybook/addon-essentials의 경우 스토리북 공식 사이트를 방문하시면 Essential addons를 확인하실 수 있는데요 해당 리스트에 나온 아이들 중 Docs 와 Viewport에 대해 말씀드리겠습니다.

Docs

필수 addons에 포함되기 전 각 설치가 필요했을 때 해당 addon의 설치 명령어는 npm add -D @storybook/addon-docs였습니다.

Button 컴포넌트의 디자인 상태와 코드를 확인할 수 있는 기능 제공 및 컴포넌트의 옵션값(Name	,Description,Default,Control) 등을 확인할 수 있는 Docs 탭 화면
Docs 탭의 컴포넌트 디테일 옵션 확인 화면

설치를 하면 작업해둔 코드를 바탕으로 해당 컴포넌트의 각 상태별 코드를 show/hide code 버튼을 통해 파일을 굳이 찾아들어가지 않아도 바로 확인하여 작업 가능하며, 어떤 옵션 값들이 있는지 테이블로 설명이 되어있어 협업 시 유용하게 사용 가능합니다.

Viewport

해당 addon의 설치 명령어는 npm add -D @storybook/addon-viewport입니다.

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
};

위와 같이 설정해주면 다양한 디바이스를 선택하여 적용해볼 수 있습니다.

모바일 해상도를 선택하여 가로세로 모드 전환 테스트 후 다시 원래 상태의 화면으로 돌아기는 영상
Viewport 선택 적용

Console

필수 Essential addons 외 다른 아이도 있는데요.
이벤트가 제대로 작동하는지 콘솔을 찍어 확인하는 경우가 많은데 개발자 도구를 열지 않아도 확인 가능하게 해주는 addon이 존재합니다. npm add -D @storybook/addon-viewport 으로 설치해주세요.

개발자 도구를 통해 해도 되지만 스토리북에서 간혹 이벤트를 외부로 보내지 못하는 경우도 발생하기에 스토리북 내부적으로 콘솔을 찍는 애드온을 활용하는 것이 좋겠지요.

preview.js에 해당 addon을 import 해주면 됩니다.

import '@storybook/addon-console';

그리고 해당 컴포넌트 스토리 파일에서 이벤트에 콘솔을 연결해주면 됩니다.

// Button.stories.js
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: ‘Button’,
  // 확인이 필요한 컴포넌트 이벤트에 콘솔 찍기
  onClick: () => console.log(‘click’),
};

위의 코드로 확인을 진행해도 되지만 콘솔을 여러개 넣은 경우 어떤 아이에게 발생한 이벤트인지 확인이 어려울 경우 아래와 같이 코드를 추가해주면 스토리의 경로가 접두사로 붙게 됩니다.

// preview.js
import {addDecorator} from ‘@storybook/react’;
import { withConsole } from ‘@storybook/addon-console’;

addDecorator((storyFn, context) => withConsole()(storyFn)(context));

// Button.stories.js
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: ‘Button’,
  // 확인이 필요한 컴포넌트 이벤트에 콘솔 찍기
  onClick: () => console.log(‘click’),
};

마치며

스토리북을 조금 더 활용할 수 있는 addon 몇 가지를 설명 드렸습니다. 공부를 해나가면서 더 많은 addon에 대한 부분들은 추가해나갈 예정입니다. 부족하지만 스토리북이라는 툴에 대해 접근하실 때 도움이 된다면 좋겠습니다. 읽어주셔서 감사합니다. 😊 그럼 안녕히…👋 -The End-

참고 문서


    추천 글