> 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/story-action.md).

# Story 액션

액션(action)은 Story에서 이벤트 핸들러(callback) 인수가 받은 데이터를 표시하는 데 사용됩니다.

{% embed url="<https://storybook.js.org/b0366940cf7195b6d5b646c6105c217c/addon-actions-optimized.mp4>" %}

## 액션 인자 <a href="#action-arg" id="action-arg"></a>

액션은 `action` 인자를 스토리에 제공하여 작동합니다. `action` 인자를 설정하는 방법은 2가지 입니다.

### 사용자 설정

{% tabs %}
{% tab title="컴포넌트 Story 포멧 (CSF)" %}

```jsx
export default {
  // ...
  argTypes: { 
    onClick: { action: '클릭!' } 
  }
}
```

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVY5x6gwPxHtaQJ_nFZ%2F-MVY6FTY9sQSnpkc4SNy%2Fimage.png?alt=media\&token=6b7cc21d-f7a5-4811-9b5e-dbbeee305f70)
{% endtab %}
{% endtabs %}

### 액션 자동 감지

액션을 자동 감지하여 추론하도록 하려면 다음과 같이 매개변수를 설정합니다.

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

```jsx
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
}

```

{% endtab %}
{% endtabs %}