안녕하세요, 일루넥스 개발팀 박윤민입니다.
웹에서는 컴포넌트 기반으로 개발을 많이 하는데 컴포넌트 기반 개발을 좀 더 쉽게 할 수 있는 라이브러리 중 하나인 storybook에 대해 소개해보고자 합니다.
Storybook 이란?
Storybook은 UI 개발을 위한 도구입니다. 구성 요소를 분리하여 개발을 더 빠르고 쉽게 만듭니다.
이렇게 하면 한 번에 하나의 구성 요소에서 작업 할 수 있습니다.
복잡한 개발 스택을 시작하거나 특정 데이터를 데이터베이스에 강제로 넣거나 애플리케이션을 탐색하지 않고도 전체 UI를 개발할 수 있습니다.
또한 Storybook은 재사용을 위해 구성 요소를 문서화 하고 버그를 방지하기 위해 구성 요소를 시각적으로 자동 테스트 하는 데 도움이 됩니다 .
반응 형 레이아웃을 미세 조정하거나 접근성을 확인하는 데 도움이 되는 애드온 에코 시스템으로 Storybook을 확장 하세요.
Storybook은 가장 널리 사용되는 JavaScript UI 프레임 워크와 통합됩니다.
시작하기
storybook은 CLI를 제공하기에 좀 더 편리하게 설치 할 수 있습니다.
npx sb init --type react 
- 설치가 완료되고 처음 실행 한 화면 모습입니다.
Component 만들기
간단한 input 컴포넌트를 만들어 보도록 하겠습니다.
import React from 'react';
import PropTypes from 'prop-types';
import {action} from "@storybook/addon-actions";
export const Input = ({ type, readOnly, required, placeholder, selectOptions }) => {
if(type === 'select') {
return (
<select onChange={({nativeEvent:{target:{value}}}) => action('onChange')(value)}>
{
selectOptions.map(option => {
return (
<option value={option.value}>
{option.title}
</option>
)
})
}
</select>
)
} else {
return (
<input
type={type}
readOnly={readOnly}
required={required}
placeholder={placeholder}
onChange={({nativeEvent:{target:{value}}}) => action('onChange')(value)}
/>
);
}
};
Input.propTypes = {
type: PropTypes.string,
readOnly: PropTypes.bool,
required: PropTypes.bool,
placeholder: PropTypes.string,
selectOptions: PropTypes.array,
};
Input.defaultProps = {
type: 'text',
readOnly: false,
required: false,
placeholder: '입력 하세요',
selectOptions: [],
}; type 값에 따라 text input, select box를 생성 할 수 있는 Component입니다.
Component는 추가로 해주어야 하는 작업은 없고 storybook에 올리기 위한 파일을 따로 작성하면 됩니다.
기존에 만들어 두었던 Component를 storybook 연동 시켜 주어도 됩니다.
이제 storybook에 올려보도록 하겠습니다.
import React from 'react';
import { Input } from './Input';
export default {
title: 'Example/Input',
component: Input,
};
const Template = (args) => <Input {...args} />;
export const Text = Template.bind({});
Text.args = {
type: 'text',
};
export const Select = Template.bind({});
Select.args = {
type: 'select',
placeholder: '선택하세요',
selectOptions: [
{
title: '사과',
value: 1,
},
{
title: '배',
value: 2,
},
{
title: '복숭아',
value: 3,
}
],
}; storybook에 올리기 위해서는 기본값으로 .stories.js로 파일을 생성하면 됩니다.
그리고 stories폴더 하위에 파일을 생성하면 됩니다.
경로와 파일명의 경우 customizing을 통해 변경이 가능하기에 기호에 맞게 변경해서 사용하시면 됩니다.
스토리 파일은 개발 전용이며 프로덕션 번들에 포함되지 않습니다.
마치며
지금까지 간단하게 storybook에 대해 알아보았습니다.
적절한 customizing을 통해서 UI 개발을 좀 더 쉽고 편리하게 개발 해보는 것은 어떨까요?
감사합니다.
