라이브러리

Storybook - UI 컴포넌트 개발을 위한 필수 도구

인어공쭈 2024. 9. 20. 20:34

프론트엔드 개발을 하다 보면 UI 컴포넌트를 반복해서 만들고, 테스트하고, 유지보수해야 하는 일이 많다. 이때 Storybook은 UI 컴포넌트 개발을 더 쉽고 체계적으로 할 수 있도록 도와주는 훌륭한 도구이다. 특히, React, Vue, Angular와 같은 다양한 프레임워크에서 사용이 가능하다.

컴포넌트 기반 개발(Component-Driven Development)(CDD) 방법론에 따라 만들어진다.

Storybook이란?

Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공하는 오픈 소스 도구이다. 보통 웹 애플리케이션을 개발할 때, UI 컴포넌트는 애플리케이션의 나머지 부분들과 결합된 상태에서 작동한다. 하지만 Storybook을 사용하면, 애플리케이션의 나머지 부분과 독립적으로 컴포넌트를 분리해 작업할 수 있다. 이렇게 하면 UI를 단독으로 테스트하고, 오류를 빠르게 발견하고 수정할 수 있다.

 

왜 Storybook이 필요한가?

많은 팀이 Storybook을 사용하는 이유는 명확하다. UI 컴포넌트를 관리하는 일은 생각보다 복잡하다. 여러 가지 상태, 조합, 반응형 디자인을 고려해야 하고, 이를 애플리케이션의 전체 흐름 속에서 모두 테스트하려면 시간이 많이 걸린다. Storybook은 이런 번거로움을 줄여준다.

첫째, Storybook은 컴포넌트 카탈로그를 제공한다. 카탈로그는 컴포넌트의 다양한 상태를 한눈에 볼 수 있도록 시각화해 주는 기능이다. 예를 들어, 버튼 컴포넌트를 만들었다고 가정해 보자. 이 버튼이 비활성화된 상태, 로딩 중인 상태, 클릭되었을 때의 상태 등 다양한 경우의 수를 쉽게 테스트할 수 있다. 카탈로그는 이러한 컴포넌트를 일목요연하게 정리해 두어 협업 시에도 유용하다.

둘째, Storybook은 개발 속도를 빠르게 해준다. Storybook에서 제공하는 핫 리로딩 기능 덕분에 코드를 수정하면 즉시 그 결과를 Storybook에서 확인할 수 있다. 이는 개발자가 컴포넌트를 만들고 빠르게 피드백을 받을 수 있는 환경을 제공해 준다.

 

사용방법은?

1. Storybook 설치

npx storybook init

 

2. Storybook 실행

npm run storybook

 

3. 스토리 작성하기

이제 Storybook에서 컴포넌트를 테스트할 스토리 파일을 만들어 보자. 스토리는 특정 컴포넌트가 다양한 상태에서 어떻게 보이는지 정의하는 역할을 한다. stories 폴더에 .stories.js 파일을 추가하고, 그 안에 스토리를 작성한다.

// Button.stories.js
import React from 'react';
import { Button } from './Button';

// 스토리 정의
export default {
  title: 'Example/Button', // 스토리북에서 보여질 컴포넌트 이름
  component: Button, // 사용할 컴포넌트
};

// 다양한 버튼 상태 정의
export const Primary = () => <Button primary label="Primary Button" />;
export const Secondary = () => <Button label="Secondary Button" />;
export const Large = () => <Button size="large" label="Large Button" />;
export const Small = () => <Button size="small" label="Small Button" />;

 

4. 컴포넌트 문서화

Storybook의 강력한 기능 중 하나는 컴포넌트 문서화 기능이다. 스토리 파일 내에서 각 컴포넌트에 대한 설명을 추가해 문서처럼 활용할 수 있다. 이를 위해 args와 controls 기능을 사용할 수 있다.

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Primary Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
};

 

5. 스냅샷 테스트

스냅샷 테스트(Snapshot)는 주어진 입력에 대해 컴포넌트의 '구분하기 좋은' 출력값을 기록한 다음, 향후 출력값이 변할 때마다 컴포넌트에 플래그를 지정하는 방식을 말한다. 이는 새로운 버전의 컴포넌트를 보고 바뀐 부분을 빠르게 확인할 수 있기 때문에 Storybook을 보완해 줄 수 있다.

Storyshots 애드온(addon)을 사용하면 각 스토리에 대한 스냅샷이 생성된다.

반응형