스토리북 맛보기 #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였습니다.

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-

이 글은 pxd XE Group Blog에서도 보실 수 있습니다.

참고 문서

• Storybook 공식 홈페이지