동화책 읽고 개발자 경험 향상시키기 - storybook에 대해 알아보자

storybook은 컴포넌트를 독립적으로 개발할 수 있도록 도와주는 컴포넌트 관리 도구이다

storybook은 모든 개발자들이 필수적으로 사용하지는 않지만 사용한다면 확실히 개발자 경험을 향상시켜준다고 생각한다

storybook이 나오기 전에 사람들은 어떻게 컴포넌트를 개발하고 테스트했을까?

나와 내 친구들은 페이지에 컴포넌트를 띄워 직접 개발과 테스트를 했었다 하지만 이렇게 컴포넌트를 개발하고 테스트한다면 아래와 같은 단점들이 존재할 것이라고 생각한다

• 개발과 테스트를 페이지에 띄워 테스트하고 페이지에 띄우는 데 사용한 코드를 다시 지워야 한다
• 다른 사람이 테스트할 때도 따로 컴포넌트를 확인할 수 없어 위의 상황을 반복해야 한다
• 만약 컴포넌트가 상태에 따라 다르게 나타나 컴포넌트를 비교할 일이 생긴다면 위의 상황을 더 반복해야 한다

이러한 단점을 없애고 더 편하게 컴포넌트를 개발하고 테스트할 수 있게 도와주는 라이브러리가 바로 storybook이다

storybook 사용하기!

내가 설명하는 방법은 nextjs(app router) 프로젝트에서 storybook을 사용하는 방법이다 다른 라이브러리나 프레임워크를 사용한다면

storybook 공식문서를 참고하여 세팅해 보자(공식문서에는 다양한 프레임워크와 라이브러리에서 사용하는 법이 잘 나와있는 거 같다!)

nextjs(app router)에 대해 알아보기!

+ 프로젝트에 storybook을 처음 적용한다면 storybook을 설치할 때 알아서 프레임워크를 감지해 프레임워크에 맞게끔 적용되는 거 같다

1. storybook 설치

nextjs 프로젝트에 아래의 명령어를 입력해 storybook을 설치하자!

npx storybook@latest init

or

pnpm dlx storybook@latest init

2. *.stories.tsx 만들기

storybook preview에 component를 보이게 하려면 *.stories.tsx 파일을 만들어야 한다

평소처럼 component를 만들고 *.stories.tsx 파일에 등록? 시켜주어야 한다

나는 간단하게 Button component를 만들었다

button.tsx

const Button = ({ color }: { color: string }) => {
  return (
    <button
      onClick={() => {
        console.log("clicked!");
      }}
      style={{ backgroundColor: color }}
    >
      click me!!
    </button>
  );
};

export default Button;

button.stories.tsx

import Button from "./button";
import { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    color: "red",
  },
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {};

export const BlueColor: Story = {
  args: { color: "blue" },
};

실제 preview에는 Primary와 BlueColor로 컴포넌트가 보이게 된다

meta는 story의 meta 정보를 정의하는 데 사용된다

Button 컴포넌트는 color를 props로 받는데 storybook에서는 상태에 따른 여러가지 컴포넌트의 상태를 보여줄 수 있게 제공한다

BlueColor라는 Story 객체를 보면 args 객체 안에 Button 컴포넌트가 받을 props를 넣어줄 수 있다

이렇게 하면 Primary 상태와 BlueColor 상태일 때의 컴포넌트를 모두 볼 수 있기 때문에 예상 가능한 상태를 모두 보이게도 할 수 있다

마무리

오늘은 storybook에 대해 알아보고 세팅과 사용도 해봤다

storybook을 알기 전까지는 복잡한 방법으로 component를 확인하고 테스트 했었는데 storybook을 사용함으로써 훨씬 효율적으로 개발과 테스트가 가능해졌다 앞으로 개발을 할 때 없어서는 안될 존재가 된거 같다