Storybook 사용해 보기

 

Storybook이란

컴포넌트 단위의 개발을 도와주는 툴로서 하나의 컴포넌트가 어떻게 보여지고

어떻게 작동하는지 알 수 있게 해주는 도구

 

Storybook 공식문서

 

공식문서에 전부 나와있는 내용이기는 하지만

이번에 강의에서 잠깐 다루어 주셔서 정리를 해보았다.

 

설치

npx -p @storybook/cli sb init

 

설치를 완료하면 루트에 .storybook이라는 폴더가 생기고 src안에 stories라는 폴더가 생긴다.
storybook: 설정 폴더

stories: 등록된 스토리들을 관리하는 폴더

 

실행

npm run storybook

명령어를 통해 storybook을 실행하면 브라우저가 나타나며

임시로 작성된 샘플 컴포넌트들이 표시된다.

 

 

 

컴포넌트 등록하기

 

1. 컴포넌트를 만들고 props를 통해 스타일 지정

import React from "react";

const Box = ({ width = 100, height = 100, backgroundColor = "red" }) => {
  const style = {
    width,
    height,
    backgroundColor,
  };
  return <div style={style} />;
};
export default Box;

 

 

2. stories폴더 안에 story 파일 생성

컴포넌트명.stories.js

 

3. 스토리 정의

 

[stories/Box.stories.js]

import React from "react";

import Box from "../components/Box";

export default {
  title: "Example/Box", // 경로 및 폴더 이름
  component: Box, // 연결할 컴포넌트
  argTypes: { // argument 정의
    width: { control: "number" },
    height: { control: "number" },
    backgroundColor: { control: "color" },
  },
};

 

 

argTypes 부분에서 우리가 props로 받은 데이터를 storybook의 브라우저에서 어떤 형태로 표시할 지 지정할 수 있다.

 

 

4. 스토리(템플릿) 작성하기

 

스토리를 어떻게 렌더링 할 지 작성하는 부분이다.

여러가지의 스토리를 작성해서 내보낼 수 있으며 기본 작성법은 아래와 같다.

const Template = (args) => <Box {...args} />;
export const Default = Template.bind({});

 

아래와 같이 좀 더 직관적으로 작성할 수도 있다.

// const Template = (args) => <Box {...args} />;
// export const Default = Template.bind({});

export const Default = (args) => {
  return <Box {...args} />;
}

 

 

Action 등록하기

storybook의 컨트롤 탭 옆에는 Actions가 있는데 이곳에서 이벤트의 발생 또한 확인할 수 있다.

 

 

[components/Button.js]

import { useState } from "react";

const Button = ({ width = 100, backgroundColor = "black", onToggle }) => {
  const style = {
    width,
    padding: 20,
    backgroundColor,
  };

  return (
    <button style={style} onClick={onToggle}>
      Click!
    </button>
  );
};

export default Button;

일단 컴포넌트에 props를 통해 이벤트를 받아서 컴포넌트 내부 요소에 연결시킨다.

 

 

Story에 이벤트 등록

import React from "react";

import Button from "../components/Button";

export default {
  title: "Example/Button",
  component: Button,
  argTypes: {
    width: { control: "number" },
    changeColor: { control: "color" },
    backgroundColor: { control: "color" },
    onToggle: { action: "toggled" }, // props로 받은 함수 등록
  },
};

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

export const Default = Template.bind({});

 

이벤트를 실행시키면 

Storybook의 Actions에서 해당 이벤트 발생 시 로그가 출력되는 것을 확인할 수 있다.

 

 

argTypes 세부 설정

StoryBook 공식문서 : Arg

export default {
  title: "Component/Text",
  component: Text,
  argTypes: {
    size: { control: "string" },
    strong: { control: "boolean" },
    color: { control: "color" },
  },
};

위와 같이 간단하게 설정할 수도 있지만 좀 더 세부적으로 설정하는 방법도 있다.

 

argTypes: {
    src: {
      type: { name: "string", require: true }, // 필수 입력 설정
      defaultValue: "https://picsum.phtos/200", // 기본으로 출력할 값
      control : { type: 'text'}
    },
  },

 

range

최소 값과 최대 값을 명시하고 range형태로 출력할 수 있다.

argTypes: {
    level: { control: { type: "range", min: 1, max: 6 } },
  },

 

options

선택 란에 radio형태의 options로 설정할 수 있다.

  argTypes: {
      defaultValue: "cover",
      options: ["cover", "fill", "contain"], 
      control: "inline-radio",
    },

 

---

 

간단하게 몇 개의 컴포넌트들을 연결해 봤을 땐

컴포넌트 단위로 ui를 페이지상에서 확인할 수 있다는 것이

그냥 개발했을 때와 얼마나 큰 차이가 있는지 와닿지는 않았었다.

 

하지만 강의를 들으며 컴포넌트 단위로 많은 story를 쌓아놓다 보니

story를 많이 만들어 놓다보면 나중에 다른 프로젝트를 진행할 때도 가져와서 사용할 수 도 있을 것 같고

컴포넌트를 전부 만들어놓고 스토리로 ui를 확인하고 블록처럼 가져다 붙이는 용도로도 사용할 수 있을 듯 했다.

 

아직은 기본적인 것만 해보기도 했고 작은 규모의 프로젝트들만 하다보니 필요성을 크게 느끼진 못하지만

일단은 이러한 도구가 있다~정도로만 알고 이후에 필요성이 느껴지면 도입해보면 좋을 것 같다.

 

 

 

📌 참고

프로그래머스 강의

생각에 도움을 준 글