React에서 Storybook으로 UI 컴포넌트 개발하기

 

프론트엔드 개발에서 UI 컴포넌트를 설계하고 테스트하는 작업은 매우 중요합니다. 특히 대규모 프로젝트에서는 컴포넌트의 일관성과 재사용성을 유지하는 것이 필수적입니다. 이런 상황에서 Storybook은 강력한 도구로 자리 잡았습니다. 이 글에서는 React와 Storybook을 활용해 UI 컴포넌트를 효율적으로 개발하는 방법을 단계별로 알아보겠습니다.

Storybook이란?

Storybook은 UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 오픈 소스 도구입니다. 다음과 같은 장점이 있습니다:

1. 독립적인 개발 환경: 애플리케이션과 별개로 컴포넌트를 개발하고 테스트할 수 있습니다.
2. 실시간 미리보기: 컴포넌트의 다양한 상태를 즉시 확인할 수 있습니다.
3. 자동 문서화: 컴포넌트의 PropTypes나 TypeScript 인터페이스를 기반으로 문서를 자동 생성합니다.
4. 추가 확장성: 애드온(Addon)을 통해 테스트, 접근성 검사 등 다양한 기능을 활용할 수 있습니다.

Storybook 설치하기

Storybook을 React 프로젝트에 설치하려면 다음 단계를 따라야 합니다:

1. 프로젝트 초기화

먼저 React 프로젝트가 준비되어 있어야 합니다. 새로운 프로젝트를 생성하거나 기존 프로젝트를 활용하세요.

npx create-react-app my-app
cd my-app

2. Storybook 설치

Storybook CLI를 사용해 설치를 진행합니다. CLI 명령어는 프로젝트에 필요한 모든 설정을 자동으로 구성합니다.

npx storybook@latest init

이 명령어는 다음을 수행합니다:

• Storybook의 필수 패키지 설치
• .storybook 디렉토리 생성
• 기본 설정 파일 생성
• 초기 데모 스토리 추가

설치가 완료되면 다음 명령어로 Storybook을 실행할 수 있습니다:

npm run storybook

브라우저에서 http://localhost:6006을 열어 Storybook 인터페이스를 확인하세요.

Story 작성하기

Storybook에서 각 컴포넌트는 스토리로 정의됩니다. 스토리는 컴포넌트의 다양한 상태를 보여주는 사례(case)입니다. 스토리는 stories 파일에서 작성됩니다.

1. 기본 컴포넌트 생성

예제로 버튼 컴포넌트를 만들어 보겠습니다:

// src/components/Button.js
import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ label, backgroundColor, size, onClick }) => {
  const styles = {
    backgroundColor,
    padding: size === 'large' ? '16px 32px' : '8px 16px',
    fontSize: size === 'large' ? '18px' : '14px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
  };

  return (
    <button style={styles} onClick={onClick}>
      {label}
    </button>
  );
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'large']),
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: '#007bff',
  size: 'small',
  onClick: undefined,
};

export default Button;

2. 스토리 작성

이제 Button 컴포넌트에 대한 스토리를 작성해 보겠습니다:

// src/components/Button.stories.js
import React from 'react';
import Button from './Button';

export default {
  title: 'Example/Button', // Storybook UI에서 보이는 카테고리 이름
  component: Button,      // 연결된 컴포넌트
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  backgroundColor: '#007bff',
  size: 'large',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  backgroundColor: '#6c757d',
  size: 'small',
};

3. Storybook에서 확인하기

스토리를 작성한 후 npm run storybook 명령어를 실행하면 Storybook UI에 새로운 Button 컴포넌트가 표시됩니다. Primary와 Secondary 상태를 클릭하여 컴포넌트를 미리 볼 수 있습니다.

Storybook 애드온 활용하기

Storybook은 다양한 애드온(Addon)을 통해 기능을 확장할 수 있습니다. 아래는 대표적인 애드온 몇 가지와 사용 방법입니다:

1. Knobs

Knobs 애드온은 UI를 통해 스토리의 Props를 동적으로 변경할 수 있게 합니다.

설치:

npm install @storybook/addon-knobs

사용:

// .storybook/main.js
module.exports = {
  addons: ['@storybook/addon-knobs'],
};

// Button.stories.js
import { withKnobs, text, color } from '@storybook/addon-knobs';

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

export const Dynamic = () => (
  <Button
    label={text('Label', 'Dynamic Button')}
    backgroundColor={color('Background Color', '#007bff')}
  />
);

2. Actions

Actions 애드온은 이벤트 발생을 추적할 수 있습니다.

설치:

npm install @storybook/addon-actions

사용:

// Button.stories.js
import { action } from '@storybook/addon-actions';

export const Clickable = () => (
  <Button
    label="Click Me"
    onClick={action('button-click')}
  />
);

스토리를 실행하고 버튼을 클릭하면 Storybook UI에서 이벤트 로그를 확인할 수 있습니다.

접근성 검사하기

Storybook은 @storybook/addon-a11y를 통해 컴포넌트의 접근성을 검사할 수 있습니다.

설치:

npm install @storybook/addon-a11y

설정:

// .storybook/main.js
module.exports = {
  addons: ['@storybook/addon-a11y'],
};

사용:

// Button.stories.js
import { withA11y } from '@storybook/addon-a11y';

export default {
  title: 'Example/Button',
  component: Button,
  decorators: [withA11y],
};

스토리를 실행하면 UI에서 접근성 경고와 개선점을 확인할 수 있습니다.

마치며

Storybook은 React 개발자에게 UI 컴포넌트를 독립적으로 개발하고 테스트하며 문서화할 수 있는 강력한 도구를 제공합니다. 이 글에서 소개한 기본 사용법과 애드온 활용 방법을 바탕으로 프로젝트에 Storybook을 통합해보세요. 이를 통해 더 높은 생산성과 일관성을 가진 UI 컴포넌트를 구현할 수 있을 것입니다.