Storybook - Docs 애드온 (4)
이번에는 Storybook의 Docs 애드온에 대해서 알아보도록 하겠습니다.
Docs 애드온?
Docs 애드온은 MDX 형식으로 문서를 작성할 수 있게 도와주는 애드온입니다. 컴포넌트의 Props와 사용된 주석에 기반하여 자동으로 Storybook에서 확인할 수 있는 문서를 만들어 줍니다.
Docs 애드온 설치
먼저, Docs 애드온을 설치합니다.
yarn add —dev @storybook/addon-docs
# 또는 npm install —save-dev @storybook/addon-docs
설치가 완료되면 ./storybook/main.js 설정파일의 addon을 추가합니다.
module.exports = {
stories: ['../src/components/**/*.stories.js'],
addons: [
…
'@storybook/addon-docs/react/preset'
],
};
Storybook의 preset(https://storybook.js.org/docs/presets/introduction/) 기능은 Webpack 설정을 비록한 여러 설정들을 하나의 그룹으로 만들어 설정을 더욱 쉽게 해주는 기능입니다.
그럼 Storybook 화면을 다시 보시면 상단에 Docs 탭이 추가된걸 확인할 수 있습니다.
이젠 Button 컴포넌트에서 사용되는 Props 에 대한 propTypes 를 설정하고 Storybook의 Docs에서 어떻게 표현해주는지 확인해 봅시다.
// Button/index.js
import React, {useState} from 'react';
import PropTypes from 'prop-types';
import './Button.css'
function Button ({title, active, onActiveHandler}) {
const [onActive, setActive] = useState(active);
/**
* setActiveHandler
*/
function setActiveHandler() {
setActive(!onActive);
onActiveHandler(onActive);
}
return (
<button
type="button"
class={`${(onActive) ? 'on' : ''}`}
onClick={setActiveHandler}>{title}</button>
);
}
Button.propTypes = {
/** 버튼의 title 값 */
title: PropTypes.string,
active: PropTypes.bool,
onActiveHandler: PropTypes.func,
}
Button.defaultProps = {
title: '안녕하세요',
active: false,
onActiveHandler: () => {},
}
export default Button;
Storybook 화면에서 Docs 탭으로 전환하면 아래와 같이 나타납니다.
Button.storybook.js에서 컴포넌트에 설정한 내용과, Button 컴포넌트 내부의 PropTypes 의 내용이 깔끔한 문서 형태로 화면에 표시됩니다.
추가적으로 propTypes 내부에 /** */ 주석을 이용해 문구를 작성하면 Storybook Docs에서 주석문구를 포함하여 표시해 줍니다.
지금까지 Storybook 설치 및 각종 애드온 활용에 대해서 알아보았습니다.
더 다양한 애드온 기능은 Storybook 공식 페이지에서 확인해 보시고 프로젝트에 적용해 보시기 바랍니다.
자세한 사용법은 Storybook 홈페이지 에서 확인하실 수 있습니다.
Leave a comment