회사에서 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
