storybook

ayaan92·2022년 4월 8일
0

회사에서 storybook을 사용하는데 처음봤다
찾아보니 컴포넌트 단위의 개발을 할 때 컴포넌트가 어떻게 보여지고 어떻게 동작하는지 알 수 있게 해주는 툴이었다

예를 들어 컴포넌트가 args로 color, size를 받는다면 스토리북을 통해 color와 size에 대해 임의의 값을 넣어 보고 이를 눈으로 직접 확인할 수 있는 작업 툴이라는 말이다

기본적인 사용법을 알아야 될 것 같아 찾아봤다

storybook의 설정은 ./.storybook/main.js에서 할 수 있다

1. export default


스토리북에서 export default는 어떤 add-on을 사용하였는지, 어떤 컴포넌트를 볼 것인지, 어떤 분류로 저장할 것인지 등 여러 정보를 제공하는 곳이다

export default {
  title: "대분류/중분류/소분류",
  component: primary,
  decorators: [(story) => <div style={{ padding: "10px" }}>{story()}</div>],
  argTypes: {
	// ...
  }
}

title : 용도에 맞게 분류
component : 어떤 컴포넌트를 테스트할 것인지
decorators : preview로 보여지는 공간에 대해 추가적으로 렌더링을 할 수 있고, 여러 add-on을 사용할 수 있음
argTypes : 아래 툴박스에 어떤 내용들이 어떻게 구성될 것인지 정함

2. Args


각 컴포넌트에 대한 기본값을 설정해 줄 수 있다

import React from 'react';

import { Button } from './Button';

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Button',
  component: Button,
};

//👇 We create a “template” of how args map to rendering
const Template = (args) => <Button {...args} />;

//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
   primary: true,
   label: 'Button',
};

각 args의 기본값들을 정해준다
이 값들은 처음 $ npm run storybook으로 실행했을 각 컴포넌트에 적용된 값이다

스토리북 내에서 보이는 이름을 변경하고 싶다면 Primary.storyName = "새로운 이름"으로 변경하면 된다

3. TL; DR


이런걸 정리하다보면 사실 귀찮을 때가 많다
결국 이런 글을 몇개를 보더라도 중요한 건 documentation을 보고 직접 사용해보는게 가장 익히기 빠르다
혹시 누군가가 이 글을 보고있다면 영어공부를 소홀히 하지않길 바란다







*References

profile
2022.04.01. 첫직장에 입사한 신입 FE개발자입니다🔥

0개의 댓글