Storybook: Actions addon 사용법
June 08, 2020
해당 글의 모든 예시는 기본으로 설치되어 있는 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()메소드에 넣어주면 된다.
onClick()메소드가 있는 곳을 클릭하면 하단 Actions 탭에 ‘clicked’라는 이름으로 뜨는 것을 볼 수 있다.
storiesOf ?
Storybook 이용법을 찾다보면 종종 storiesOf이란 문법을 볼 수 있다.
이는 storiesOf API안에 있는 것으로 Storybook 5.2까지 사용된 stories 생성법이며, 지금은 사용하지 않아도 된다.
