---
# System prepended metadata

title: 컴포넌트 라이브러리 개발(storybook)

---

# 컴포넌트 라이브러리 개발(storybook)

앞서 리엑트 컴포넌트 라이브러리를 개발/배포까지 하는 과정을 거쳤습니다. 이번엔 개발한 라이브러리를 보여주고 설명하는 디자인 가이드를 제공하기 위해 스토리북(storybook)을 이용한 웹 페이지를 개발, 배포하는 과정을 설명하겠습니다.

## 스토리북(storybook)

[storybook](https://storybook.js.org/)

> 스토리북은 비즈니스 로직과 맥락(context)으로부터 분리된 UI 컴포넌트를 만들 수 있도록 도와줍니다

스토리북은 디자이너와 프론트 개발자를 연결하는 디자인 시스템을 손쉽게 개발할 수 있는 프레임워크입니다. 프레임워크에 국한되지 않고 개발한 컴포넌트를 스토리(story) 단위로 관리 캔버스(canvas)에 그려주며 애드온(addon)을 통해 접근성 검사 등 다양한 개발 편의 기능을 제공합니다.

![example](https://i.imgur.com/TJEbped.png)

앞서 개발한 프로젝트 루트 디렉토리에서 아래 명령어를 실행하여 storybook 환경을 기존 프로젝트에 붙입니다.

```bash
npx storybook init
```

.storybook 디렉토리가 생기고 내부에 preview.js, main.js가 생성되었을 것입니다. main.js는 빌드와 관련된 설정을 포함하고 preview.js는 보여지는 화면 설정을 포함합니다.

아래 명령어를 실행하면 스토리북을 실행할 수 있습니다.

```bash
npm run storybook
```



스토리북은 애드온을 통하여 개발에 도움이 되는 기능을 사용할 수 있습니다. 최신 버전(6)의 스토리북은 기본적으로 docs, actions, controls를 포함하고 있습니다. 이중 docs는 스토리북 문서를 작성하는데 도움을 주는 애드온입니다. 앞으로 docs를 통해 문서를 작성할 것입니다.

별도의 addon을 활용하려면 패키지 설치 후 main.js의 addon에 작성하여 사용합니다.

```js
module.exports = {
  ...
  "addons": [
    "@storybook/addon-docs",
    ...
    /** new addon */
  ]
} 

```

## 프로젝트에 맞춰 커스텀하기

`@seolim/react-ui`의 디렉토리 구조는 아래와 같습니다.

```bash
## **스토리북 관련 추가**
├── .circleci
│   └── config.yml
├── component
│   ├── index.tsx
│   └── ...components...
├── package.json
├── package.deploy.json
├── tsconfig.json
├── **.storybook**
└── **.stories**
    ├── component.stories.mdx
    └── ...stories.mdx
```

stories 디렉토리는 스토리북 페이지에서 보여질 docs를 설정하는 스크립트를 모아둡니다. mdx 포맷은 마크다운(markdown)과 jsx를 합친 포맷으로 스토리북의 docs탭을 그릴 수 있습니다.

stories 디렉토리와 파일 패턴, React를 스토리북 빌드에 포함시키기 위해 main.js를 아래와 같이 설정합니다.

```json
module.exports = {
  ...
  "stories": [
    "../stories/*.stories.mdx",
  ],
  "framework": "@storybook/react",
  ...
}
```

`@seolim/react-ui` 는 docs 페이지만을 설정하므로 docs페이지가 canvas보다 먼저 표시되게끔 preview.js를 아래와 같이 설정합니다.

```js
export const parameters = {
  ...
  viewMode: 'docs',
  ...
}

```

아래는 예시로 작성한 mdx 파일입니다. 이를 참고하여 본인만의 docs를 작성할 수 있도록 합시다. docs addon에 대한 자세한 내용은 하단의 북마크를 참조하시기 바립니다.

```mdx
import { Meta, Story, Description, ArgsTable, Canvas } from '@storybook/addon-docs';
import Button from '../../component/button/button';

<Meta title="component/Button" component={Button} />

# Button

버튼(Button)은 유저의 액션에 반응하여 동작을 실행할 수 있습니다.

아래와 같이 사용합니다.

~~~
import { Button } from '@seolim/react-ui';

const Component = () => (
  <Button>Button</Button>
);
~~~

버튼은 3가지 테마(`color`)를 제공합니다.

<Canvas>
  <Story name="normal"
    parameters={{
      layout: 'centered'
    }}>
    <Button color="normal">normal</Button>
  </Story>
  <Story name="alert"
    parameters={{
      layout: 'centered'
    }}>
    <Button color="alert">alert</Button>
  </Story>
  <Story name="semantic"
    parameters={{
      layout: 'centered'
    }}>
    <Button color="semantic">semantic</Button>
  </Story>
</Canvas>
```

[storybook docs-addon](https://storybook.js.org/docs/react/writing-docs/introduction)

## 마무리

자신만의 라이브러리, 디자인 시스템의 개발은 디자인적 통일성을 확보하고 개발 패턴을 가지게 합니다. 또한 개발 사고적으로컴포넌트의 다양성, 재사용성을 확보하기 위해 무엇을 고민해야하고 어떤 패턴을 가져야하는지 고민하게끔 도와줍니다.

[@seolim/react-ui](https://deploy-storybook--6333d80e63299bb883b10717.chromatic.com/)