Storybook: Actions addon 사용법

2020-06-08

해당 글의 모든 예시는 기본으로 설치되어 있는 src/storeis/1-Button.stories.js에서 추가하는 형태로 진행하겠다.

해당 글은 Storybook 5.3 기준으로 작성되었습니다.

Actions


import React from 'react'
import { action } from '@storybook/addon-actions'
import { Button } from '@storybook/react/demo'

export default {
  title: 'Button',
  component: Button,
}

export const Text = () => (
  <Button onClick={action('clicked')}>Hello Button</Button>
)

export const Emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
)

Actions은 간단하다. actions을 import하고, onClick()메소드에 넣어주면 된다.

actions

onClick()메소드가 있는 곳을 클릭하면 하단 Actions 탭에 'clicked'라는 이름으로 뜨는 것을 볼 수 있다.


storiesOf ?

Storybook 이용법을 찾다보면 종종 storiesOf이란 문법을 볼 수 있다. 이는 storiesOf API안에 있는 것으로 Storybook 5.2까지 사용된 stories 생성법이며, 지금은 사용하지 않아도 된다.