React 프로젝트에서 Storybook 사용하는 방법

Storybook 사용하는 방법

개요:
Storybook은 React 컴포넌트 개발을 위한 독립적인 개발 환경을 제공하는 도구입니다. UI 컴포넌트를 다양한 상태에서 테스트하고, 문서화하며, 개발과 디자인 협업을 효율적으로 진행할 수 있게 해줍니다. 이번 블로그에서는 Storybook을 React 프로젝트에 설정하고 사용하는 방법을 실습과 함께 설명합니다.

Storybook의 작동 방식과 버튼의 다양한 상태(Primary Button, Danger Button)

---

1. Storybook이란?

• Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 오픈 소스 도구입니다.
• 주요 기능:
  • 컴포넌트 개발 속도 향상.
  • 다양한 상태에서 UI 컴포넌트 테스트.
  • 디자인과 개발 간의 효율적인 협업.
  • UI 컴포넌트를 문서화.

---

2. Storybook 설치 및 설정

2.1. React 프로젝트에 Storybook 설치

Storybook을 React 프로젝트에 설치하는 방법은 매우 간단합니다. 먼저 React 프로젝트가 준비되어 있어야 하며, Storybook은 아래 명령어로 쉽게 설치할 수 있습니다.

1. 프로젝트 폴더로 이동:

   cd my-react-app

2. Storybook 설치: Storybook은 @storybook/cli를 통해 간편하게 설정할 수 있습니다.이 명령어는 Storybook을 자동으로 설정하고, 필요한 파일들을 생성합니다.

   npx storybook init

    
3. 설치가 완료되면:
   package.json에 storybook 스크립트가 추가되어 있는 것을 확인할 수 있습니다.

   {
     "scripts": {
       "storybook": "start-storybook -p 6006",
       "build-storybook": "build-storybook"
     }
   }

---

3. Storybook 실행

1. Storybook 실행:

   npm run storybook

    
   Storybook은 기본적으로 http://localhost:6006에서 실행됩니다. 브라우저에서 접속하면 Storybook의 기본 UI를 확인할 수 있습니다.

---

4. 컴포넌트에 대한 스토리 작성

Storybook에서는 각 컴포넌트의 스토리를 별도로 작성합니다. 스토리란 컴포넌트의 특정 상태나 변형을 나타내는 사례입니다.

4.1. 기본 컴포넌트 생성

1. Button 컴포넌트 생성:

   // src/components/Button.js
   import React from 'react';
   
   const Button = ({ label, backgroundColor = 'blue', onClick }) => {
     const style = {
       backgroundColor,
       color: 'white',
       padding: '10px 20px',
       border: 'none',
       cursor: 'pointer'
     };
   
     return <button style={style} onClick={onClick}>{label}</button>;
   };
   
   export default Button;

4.2. Button 컴포넌트에 대한 스토리 작성

1. Button 스토리 작성: 스토리는 컴포넌트의 다양한 상태를 보여주는 역할을 합니다. 예를 들어, 기본 버튼, 빨간색 배경의 버튼 등을 테스트할 수 있습니다.

   // src/components/Button.stories.js
   import React from 'react';
   import Button from './Button';
   
   export default {
     title: 'Example/Button',
     component: Button,
   };
   
   const Template = (args) => <Button {...args} />;
   
   export const Primary = Template.bind({});
   Primary.args = {
     label: 'Primary Button',
     backgroundColor: 'blue',
   };
   
   export const Danger = Template.bind({});
   Danger.args = {
     label: 'Danger Button',
     backgroundColor: 'red',
   };

    
2. 스토리 설명:
   • title: Storybook UI에 표시될 컴포넌트의 이름을 지정합니다.
   • component: 스토리를 작성할 컴포넌트를 설정합니다.
   • Template: 스토리에서 사용할 기본 템플릿을 설정합니다.
   • args: 컴포넌트에 전달할 기본 props를 정의합니다. 각 스토리별로 props를 다르게 설정할 수 있습니다.

---

5. Storybook에서 다양한 상태 테스트

1. Storybook UI 확인:
   Storybook을 실행하면 Primary Button과 Danger Button이 각기 다른 상태로 렌더링된 것을 확인할 수 있습니다.
2. 컴포넌트 상태 제어:
   Storybook UI에서 각 컴포넌트의 args 값을 실시간으로 조정하여 다양한 상태에서 테스트할 수 있습니다.

---

6. Storybook Add-ons 활용

Storybook은 다양한 **애드온(Add-on)**을 제공하여 기능을 확장할 수 있습니다. 애드온을 사용하면 접근성 테스트, 문서화, 상호작용 테스트 등을 추가할 수 있습니다.

1. Storybook Docs Add-on 설치: 컴포넌트 문서화를 위해 Docs 애드온을 설치할 수 있습니다.

   npm install @storybook/addon-docs

    
2. 애드온 설정:
   .storybook/main.js 파일에 애드온을 추가합니다.

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

---

7. Storybook의 장점

• 독립적인 컴포넌트 개발: UI 컴포넌트를 애플리케이션과 분리하여 독립적으로 개발할 수 있어 빠른 피드백이 가능합니다.
• 문서화 및 테스트: 작성된 컴포넌트는 자동으로 문서화되며, 다양한 상태에서 쉽게 테스트할 수 있습니다.
• 디자인 협업: 개발자와 디자이너 간의 효율적인 협업이 가능합니다. 디자이너가 컴포넌트를 직접 보고 피드백을 제공할 수 있습니다.

---

결론

Storybook은 React 프로젝트에서 UI 컴포넌트를 독립적으로 개발하고, 다양한 상태에서 테스트할 수 있는 매우 유용한 도구입니다. 설치와 설정이 간단하며, 팀 협업 시에도 강력한 기능을 제공합니다. 이 글을 통해 Storybook을 사용해 React 프로젝트에서 더 효율적으로 UI를 개발해보세요.