Storybook 사용해 보기

chaticker·2022년 6월 16일

React

목록 보기

3/3

새로운 회사에서 아토믹 디자인 패턴으로 개발을 하게 되어 컴포넌트 관리용 툴을 찾아보다가 Storybook이라는 오픈 소스를 알게 되었다. 이미 많은 회사에서 사용 중이기도 하고, 신기술을 접할 기회라고 생각해서 팀원분들께 적극(?) 추천했더니 채택 되었다.(!)

개념 설명도 하고, 실제 적용 예시까지 설명해보려고 한다.

Storybook?
UI 컴포넌트 개발 도구로, 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 문서화 해서 보여줄 수 있다. 또, 실제 웹 어플리케이션 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능하다.

React에 Storybook 적용하기 참고 링크

이미 React + Styled-components 개발 환경이 설정된 상태에서 Storybook을 추가로 설정하려고 한다.

Storybook 설치
```
npm i -g @storybook/cli
```
설치 후에 .storybook이라는 기본 설정 파일과, stories라는 파일이 생기는데, stories 파일은 삭제해준다.

.storybook > main.js 설정

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

.storybook > preview.js 설정
styled-components 사용 안 할 때

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

styled-components 사용 할 때: ThemeProvider 로 story를 감싸줘야 사용 가능

import { ThemeProvider } from "styled-components";
		// 임의로 설정
 const theme = {
    colors: {
      powderWhite: "#FFFDF9",
      persianGreen: "#06B49A",
      lightBlue: "#AFDBD2",
      onyx: "#36313D",
    },
    fonts: ["sans-serif", "Roboto"],
    fontSizes: {
      small: "1em",
      medium: "2em",
      large: "3em",
    },
  };
  export const parameters = {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  };
  // styled-components 적용을 위해 ThemeProvider 사용
  export const decorators = [
    (Story) => (
      <ThemeProvider theme={theme}>
        <Story />
      </ThemeProvider>
    ),
  ];

간단한 테스트용 스토리북 생성
button.stories.tsx

import * as React from "react";
import { storiesOf } from "@storybook/react";
import Button from "./button";

// 스토리북에 표시할 종류별 버튼 컴포넌트 추가
storiesOf("Button", module)
  .add("default", () => (
    // 'default'는 컴포넌트의 타이틀 (임의 지정 가능)
    <Button>Hello</Button>
  ))
  .add("palette", () => <Button palette>Palette</Button>)
  .add("transparent", () => <Button transparent>Transparent</Button>)
  .add("height", () => <Button height="100px">Height</Button>);

button.tsx

import * as React from "react";
import styled from "styled-components";

// 버튼 관련 스타일 지정 -> 컴포넌트 단위로 지정 가능
const StyledButton = styled.button`
    display: block;
    color: #ffffff;
    background-color: ${(props) => (props.palette ? "#0000CD" : "#CC3333")};
    border-radius: 5px;
    border: 0px;
    height: ${(props) => (props.height ? props.height : "50px")};
    opacity: ${(props) => (props.transparent ? 0.5 : 1)};
    padding: 4px;
    margin: 4px 0px;
    cursor: pointer;
    width: 20%;
    outline: none;
    font-weight: 700;
    &:hover {
    background-color: #a99fee;
    }
}`;

// 스타일 적용된 버튼 사용 -> 변수 지정 후 다른 컴포넌트에서도 사용 가능
const Button = (props) => (
  <StyledButton
    palette={props.palette}
    transparent={props.transparent}
    height={props.height}
  >
    {props.children}
  </StyledButton>
);

export default Button;

package.json 설정 후, 스토리북 실행
package.json 설정

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

스토리북 실행

npm run storybook

결과 화면

이렇게 한 화면에 미리 설정해 놓은 UI 컴포넌트를 확인할 수 있다.

개발 초기엔 storybook 관련 파일을 따로 만들어서 구현하는 것이 귀찮겠지만 프로젝트를 진행하면서 협업(컴포넌트 네이밍 규칙 등), UI 테스트, 문서화 작업에 도움이 많이 되기 때문에 사용하는 것을 추천한다.

storybook에 대해 느낀 장단점

chaticker

개발계발

이전 포스트

Storybook 사용해 보기

React

React Hooks - 작성 중

0개의 댓글