> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/storybook-for-react/storybook-addons-third-party.md).

# Storybook 애드온 (확장)

Storybook의 [애드온](https://storybook.js.org/addons/)(addons)은 Storybook을 확장합니다. Storybook 코어 팀에서 개발한 "공식" 애드온 뿐만 아니라 타사 애드온을 통한 확장도 가능합니다. 유용한 애드온을 설치해 Storybook에 다양한 기능을 추가할 수 있습니다.

## addon-a11y

[@storybook/addon-a11y](https://www.npmjs.com/package/@storybook/addon-a11y) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i -D @storybook/addon-a11y
```

{% endtab %}
{% endtabs %}

애드온 목록에 설치한 @storybook/addon-a11y 패키지를 추가합니다.

{% tabs %}
{% tab title=".storybook/main.js" %}

```javascript
module.exports = {
  // ...
  addons: [
    // ...
    '@storybook/addon-a11y'
  ]
}
```

{% endtab %}
{% endtabs %}

접근성 결과를 한국어로 출력하려면 [axe-core/locales/ko.json](https://github.com/dequelabs/axe-core/blob/develop/locales/ko.json)을 불러와 `a11y.config.locale` 값으로 설정합니다.

{% tabs %}
{% tab title=".storybook/preview\.js" %}

```javascript
// 한국어 설정
import ko from 'axe-core/locales/ko.json'

// 글로벌 파라미터 설정
// 참고: https://bit.ly/2NdEOJG
export const parameters = {
  a11y: { 
    config: { locale: ko } 
  },
  // ...
}
```

{% endtab %}
{% endtabs %}

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVXwb1D-MfRIxGFN3nA%2F-MVXwui1CKrCk0an65fV%2Fimage.png?alt=media\&token=6e9346ca-1c75-417a-96b3-7038b65c213c)

## addon-knob

[@storybook/addon-knob](https://www.npmjs.com/package/@storybook/addon-knobs) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i -D @storybook/addon-knobs
```

{% endtab %}
{% endtabs %}

애드온 목록에 설치한 @storybook/addon-knob 패키지를 추가합니다.

{% tabs %}
{% tab title=".storybook/main.js" %}

```javascript
module.exports = {
  // ...
  addons: [
    // ...
    '@storybook/addon-knobs'
  ]
}
```

{% endtab %}
{% endtabs %}

노드(knob)를 컴포넌트에서 사용하는 예시 코드입니다.

```jsx
import React from 'react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

export default {
  title: '노드 애드온 추가 예시',
  // 노브를 Story에 사용하려면 `withKnobs` 데코레이터를 추가합니다.
  decorators: [withKnobs],
};

// button 요소에 노드를 적용한 예
export const withAButton = () => (
  <button disabled={boolean('Disabled', false)}>
    {text('레이블', '안녕! Storybook')}
  </button>
);

// 노드를 동적 변수로 설정한 예
export const asDynamicVariables = () => {
  const name = text('이름', '김한나');
  const age = number('나이', 25);
  const content = `저 ${name}는 ${age}살 대한민국 여성입니다.`;

  return <div>{content}</div>;
}
```

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVXww1L8V6LvxBQFehz%2F-MVXx9mAvrJidS4xVZpV%2Fimage.png?alt=media\&token=7094f519-bbe9-4fac-b2b2-822fd5f86cdb)

{% hint style="info" %}
사용가능한 knobs 유형은 [Available Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs#available-knobs) 문서를 참고하세요.
{% endhint %}