Storybook - Knobs 애드온 (2)

이번에는 Storybook의 Knobs 애드온에 대해서 알아보도록 하겠습니다.

Knobs 애드온?

Knobs 애드온은 우리가 만든 컴포넌트에 사용되는 props를 Storybook 화면에서 입력을 통해 값을 바꿔 바로 반영시켜줄 수 있는 애드온입니다.

Knobs 설치

먼저 애드온을 설치해 주세요.

yarn add —dev @storybook/addon-knobs
# 또는 npm install —save-dev @storybook/addon-knobs<br>

설치가 완료되었다면 .storybook/main.js 설정 파일을 열어 addons 요소의 배열값에 설치된 knobs 애드온을 추가해 줍니다.

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: [
    …
    '@storybook/addon-knobs/‘register’,
  ],
};

Knobs 설정

애드온을 추가했다면 전에 만들었던 Button.storybook.js 파일에 Knobs 애드온을 연결합니다.

…
import { withKnobs } from '@storybook/addon-knobs';
…

@storybook/addon-knobs 에서 기본적으로 withKnobs 라는 함수를 사용하여 해당 애드온을 적용하면 됩니다.

추가적으로 props를 테스트하기 위한 text, boolean, number 함수를 사용할 수 있습니다.
좀더 자세한 knobs 사용법은 공식 문서에서 확인하세요.

공식 문서에서 권장하는 knobs 의 기본 사용법은 아래와 같습니다.

import React from "react";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";

export default {
  title: "Storybook Knobs",
  decorators: [withKnobs]
};
// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.

// Knobs for React props
export const withAButton = () => (
  <button disabled={boolean("Disabled", false)}>
    {text("Label", "Hello Storybook")}
  </button>
);

// Knobs as dynamic variables.
export const asDynamicVariables = () => {
  const name = text("Name", "James");
  const age = number("Age", 35);
  const content = `I am ${name} and I'm ${age} years old.`;

  return <div>{content}</div>;
};

샘플을 보시면 withKnobs 함수를 데코레이터의 배열값으로 설정하고 있습니다.

…
export default {
  title: "Storybook Knobs",
  decorators: [withKnobs]
};
…

이제 우리가 전에 만들었던 Button.storybook.js 에 decorators 요소를 만들어 값을 설정합니다.

…
export default {
  title: 'Button Component',
  component: Button,
  decorators: [withKnobs],
};
…

Button 컴포넌트 수정

이제 knobs 애드온을 활용할 수 있도록 기존에 만들었던 Button 컴포넌트를 수정해 봅시다.
Button 컴포넌트에 부모의 props 값을 넘겨받아 사용할 수 있도록 수정합니다.

// Button/Button.css

button {
  border: 1px solid #ddd;
  background: #fff;
  padding: 20px;
  font-size: 20px;
  border-radius: 10px;
  cursor: pointer;
}

button:hover,
button.on {
  background-color: red;
  color: #fff;
}

// Button/index.js

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

function Button ({title, active}) {
  return (
    <button type="button" class={`${(active) ? 'on' : ''}`}>
      {title}
    </button>
  );
}

export default Button;

props의 값에 따른 스타일 변화를 확인하기 위해 css 파일을 생성하고, 부모로 부터 text, active 라는 값을 받아 컴포넌트의를 구성할 수 있게 설정했습니다.

Storybook 화면을 확인해 보면, 기존에 버튼의 모양이 변경되어 있고, 추가작으로 하단에 Knobs 애드온의 탭 영역이 활성화 된것을 확인할 수 있습니다.

Button.storybook.js 수정

이제는 Button.storybook.js 파일에 props 에 값을 사용할 수 있게 수정해 봅시다.

// Button.storybook.js

import React from 'react';
import { withKnobs, text, boolean } from '@storybook/addon-knobs';

import Button from './index';

export default {
  title: 'Button Component',
  component: Button,
  decorators: [withKnobs],
};

export const ButtonComponent = () => {
  return (
    <Button title={text('타이틀', '안녕하세요')} active={boolean('버튼 확성', false)} />
  )
};

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

수정후 저장을 하면 Storybook 화면의 Button 컴포넌트 및 하단 Knobs 탭의 내용이 변경된걸 확인할 수 있습니다.

눈여겨볼 부분은 Knobs 탭의 input 영역 부분입니다. Button.storybook.js에서 text, boolean 을 사용해서 props 를 설정한 부분이 탭 영역에 input 형태의 UI로 설정되었습니다.

타이틀 input 의 값을 변경하면 실시간으로 Button의 text 값이 변경되며, 버튼 활성 checkbox 를 체크하면 배경색이 변경되는걸 확인할 수 있습니다.

추가적인 knobs 에서 사용할 수 있는 함수는 아래와 같습니다.

• text: 텍스트를 입력 할 수 있습니다.
• boolean: true/false 값을 체크박스로 설정 할 수 있습니다.
• number: 숫자를 입력 할 수 있습니다. 1~10과 같이 간격을 설정 할 수도 있습니다.
• color: 컬러 팔레트를 통해 색상을 설정 할 수 있습니다.
• object: JSON 형태로 객체 또는 배열을 설정 할 수 있습니다.
• array: 쉼표로 구분된 텍스트 형태로 배열을 설정 할 수 있습니다.
• select: 셀렉트 박스를 통하여 여러가지 옵션 중에 하나를 선택 할 수 있습니다.
• radios: Radio 버튼을 통하여 여러가지 옵션 중에 하나를 선택 할 수 있습니다.
• options: 여러가지 옵션을 선택 하는 UI 를 커스터마이징 할 수 있습니다 (radio, inline-radio, check, inline-check, select, multi-select)
• files: 파일을 선택 할 수 있습니다.
• date: 날짜를 선택 할 수 있습니다.
• button: 특정 함수를 실행하게 하는 버튼을 만들 수 있습니다.

위 Knobs 들의 자세한 스펙은 공식 페이지에서 확인 할 수 있습니다.