📚 Storybook
기업 협업 인턴을 시작하면서 회사에서 storybook 을 처음 사용해보았다.
이번 기회를 통해서 storybook을 왜 사용하는지, 그 장점이 무엇인지 자세히 알아보는 계기가 되었고, 공부한 내용을 정리한 포스트이다.
📄 Storybook 이란?
Storybook은 UI 컴포넌트들을 개별적으로 개발하고 테스트하는 도구로, 프론트엔드 개발자들이 컴포넌트들을 빠르게 확인하고 상태를 시각적으로 테스트하는 환경을 제공해준다. 주로 React, React Native, Vue, Angular 등의 프레임워크와 함께 사용되며, 컴포넌트들을 독립적으로 개발하고 관리할 수 있게 도와준다.
📑 Storybook 사용 이점
-
개발 생산성 향상: Storybook을 활용하면 개발자들은 개별 컴포넌트들을 빠르게 개발하고 테스트할 수 있어 컴포넌트 개발의 효율성이 크게 향상된다.
-
시각적 피드백 제공: 각 컴포넌트의 다양한 상태와 시나리오를 Storybook에서 확인할 수 있기 때문에, 디자이너나 비개발자들과의 커뮤니케이션에 용이하며 컴포넌트들의 디자인과 동작을 시각적으로 검증할 수 있다.
-
재사용성 증가: Storybook은 각 컴포넌트를 독립적으로 테스트하고 관리하기 때문에, 컴포넌트의 재사용성이 높아진다. 비슷한 디자인과 기능을 갖는 컴포넌트를 다른 프로젝트에서도 쉽게 재사용이 가능하게 한다.
-
타입 체크와 테스트 용이성: TypeScript와 함께 사용하면 각 컴포넌트의 타입을 명시적으로 지정하고 테스트하기 용이해진다. 또한, 시각적으로 컴포넌트의 상태를 테스트할 수 있기 때문에 버그를 사전에 발견할 수 있는 장점이있다.
🗒️ Storybook 예시
아래는 간단한 Button 스토리북 컴포넌트 예시이다.
import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react-native';
...
export default {
title: 'Button',
component: Button,
argTypes: {
onPress: { action: 'pressed the button' },
},
args: {
text: 'button',
},
decorators: [
(Story) => (
<StoryContainer>
<Story />
</StoryContainer>
),
],
} as ComponentMeta<typeof Button>;
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
export const Basic = Template.bind({});
📝 결론
결론적으로 우리는 컴포넌트 주도개발을 할때 결과물을 확인하면서 해야하는데 이때, Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트하는데 매우 유용한 도구이다. 다양한 프로젝트에서 Storybook을 도입하면 개발 생산성을 높이고, 디자인과 개발 간의 커뮤니케이션을 원활하게 할 수 있다.
이러한 장점 이외에도 좀 더 괜찮은 컴포넌트 설계를 고민하며 코드를 작성할 수 있다는 점이다. 처음 코드를 작성하고 나중에 수정하거나 재사용 할때, 문제점들이 발생하여 어려움을 겪을 수 있기 때문이다. 하지만 컴포넌트와 스토리 작성을 함께 한다면 테스트를 해보면서 문제점들을 발견할 수가 있어 미리 이러한 결함들을 발견할 수 있다. 이러한 점은 리팩토링으로 이어져 코드가 깔끔해지고 재사용성이 높아져 스토리북을 사용하는 환경을 많이 만들어 보는게 중요하다고 생각한다.
