> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/story-book/essential-addons.md).

# Essential addons

## Control 

#### 설치  <a href="#install" id="install"></a>

```
npm i -D @storybook/addon-controls
```

`.storybook/main.js` 파일에 아래와 같이 설정한다.&#x20;

```
module.exports = {
  addons: ['@storybook/addon-controls'],
};
```

#### 사용&#x20;

stories.js 파일의 기본내보내기 객체에 argTypes에 설정한다.&#x20;

```javascript
export default {
  title: 'Button',
  argTypes: {
    label: { control: 'text' },
    borderWidth: { control: { type: 'number', min: 0, max: 10 } },
  },
};
```

### Control Type

#### color

```javascript
argTypes: {
    backgroundColor: { control: 'color' },
},
```

#### selector&#x20;

```javascript
argTypes: {
  control: {
    type: 'select',
    options: ['Item One', 'Item Two', 'Item Three'],
  },
}
```

외부에서 객체를 할당한 변수를 가져와 객체를 순환하여 사용할 수 있다.&#x20;

```javascript
const iconMap = { IconA, IconB, IconC, IconD, IconE };

export default {
  component: YourComponent,
  title: 'My Story with Icons',
  argTypes: {
    icon: {
      control: {
        type: 'select',
        options: Object.keys(iconMap),
      },
    },
  },
}

```

{% hint style="info" %}
[이외의 유형은 공식문서 참고! ](https://storybook.js.org/docs/react/essentials/controls#annotation)
{% endhint %}

#### 참고&#x20;

* [Storybook Controls Addon](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-will-this-replace-addon-knobs)&#x20;
* [Control](https://storybook.js.org/docs/react/essentials/controls) → 공식 문서&#x20;
* [Story Controle](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/storybook-for-react/story-control) → 공식문서 한글 번역&#x20;

## Control and proptypes

&#x20;프로젝트를 하던 중 스토리북에서 control의 역할과 propType이 구분이 안갔다. 둘 다 컴포넌트의 설정을 테스트하는 역할은 맞는데 어떤 항목은 control에 어떤 항목은 propTypes하는지 말이다.&#x20;

![붉은 박스는 propType 설정, 녹색 박스는 controle 설정 ](/files/-MW4tV6SAM7Vt6u-GQL-)

위의 이미지에서 붉은 박스는 propType 설정, 녹색 박스는 controle 설정이다. propType은 항목을 설정하고 그 항목의 control 유형을 따로 설정한다면 control을 설정한다.&#x20;