storybook을 도입하면서 하나씩 배워가고 있습니다.

도입한 이유는 UI 문서화도 있지만, 리팩토링의 목적이 사용자 경험 향상이기 때문에, 마이크로 인터랙션에 대해서도 꾸준히 확인이 필요했습니다. 이에 필요한 기능이 Actions라는 애드온을 사용하는 것입니다.

요약

Actoins 애드온: 컴포넌트에서 특정 함수가 호출됐을 때 어떤 함수가 호출됐는지, 함수에 어떤 파라미터를 넣어서 호출했는지에 대한 정보 확인 가능

- props로 넘겨주는 경우, action('액션 이름') 형태로 작성

- argTypes에 추가하는 경우, { onClick: { action: '액션 이름' } } 형태로 작성

https://velog.io/@velopert/start-storybook

https://storybook.js.org/docs/essentials/actions

결론

직접 사용해봐야 정확하게 알 수 있을 듯 합니다. 액션 이름에 함수명을 쓰는 듯 한데, 해당 함수를 어떻게 호출하는지도 궁금하고, 훅을 사용할 때도 잘 되지 않았던 기억이 있어서 가늠이 잘 가지 않았습니다.