StoryBook UI

StoryBook UI에 대하여

StoryBook UI 란?

• 스토리북(Storybook)은 다양한 방식으로 사용되고 있는 UI 컴포넌트 개발 도구이다. 단순하게 UI 라이브러리를 내부 개발자들과 협업하기 위해 문서화(Documentation) 하기 위해서 사용되기도 하며, 외부 공개용 디자인 시스템(Design System)을 개발하기 위해 기본 플랫폼으로도 사용할 수 도있다고 한다.

• 스토리북의 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 되며 각 Story는 해당 UI 컴포넌트가 어떻게 사용 될 수 있는지를 GUI 방식으로 보여주는 편의 기능이라고 생각 한다.

• UI 컴포넌트가 각각 독립적으로 실제로 랜더링 되는지 직접 시각적으로 테스트하며 개발을 진행할 수 있고, 해당 UI 라이브러리를 사용하는 개발자도 소스코드를 보지 않고도 미리 각각의 UI를 확인해 볼 수 있어서 시간적인 측면에서도 활용도가 높다고 한다.

(StoryBook UI)

https://styled-components.com/

StoryBook 설치법

$ npx @storybook/cli sb init

package.json

"scripts": {
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
},

"devDependencies": {
  "@storybook/addon-actions": "^5.2.8",
  "@storybook/addon-links": "^5.2.8",
  "@storybook/addons": "^5.2.8",
  "@storybook/react": "^5.2.8"
}

// 이후, package.json 에서 추가된 것을 볼 수 있다.

StoryBook 설정

import configure from "@storybook/react";

// automatically import all files ending in *.stories.js
// configure(require.context('../src/stories', true, /\.stories\.js$/), module);
configure(require.context("../src", true, /\.stories\.js$/), module);

StoryBook 사용법

// Template 생성

<Template>
	<BasicButton>
		<slot></slot>
	</BasicButton>
</Template>

export default {
	name : 'BasicButton'
}

// 스토리 작성

import BasicButton from './BasicButton';

export default {
	title : 'BasicButton'
};

// 스토리 1
export const withText = () => '<BasicButton> 1 </BasicButton>'

// 스토리 2
export const withEmoji = () => '<BasicButton> 🍔 </BasicButton>'

// 스토리북 실행
 npm run storybook

(실행 화면)