inflearn logo
강의

Course

Instructor

Storybooks and UI tests that can be applied directly to practice

[Update] Event handling method changed in Storybook 8.x

Storybook 10에서 argTypes에 action 설정 시

74

Coi

8 asked

0

안녕하세요! 강의 실습 도중 설정 방식과 관련하여 궁금한 점이 생겨 질문 드립니다.

강의에서는 argTypes 안에 onClick: { action: 'clicked' }를 추가하셨는데, 제가 사용 중인 Storybook 10 버전에서는 argTypes 작성 시 action이라는 키 자체가 자동 완성(타입 추론)에 나타나지 않습니다.

이와 관련하여 두 가지가 궁금합니다.

  1. 타입 추론 문제: argTypes에서 action 키가 뜨지 않는 것이 Storybook 버전이 올라가면서 바뀐 방식인가요? 아니면 제가 별도의 설정을 놓치고 있는 것인가요?

  2. 설정 방식의 차이: 현재 강의에서는 아래 두 가지를 모두 사용하셨습니다.

    • argTypes: { onClick: { action: 'clicked' } }

    • args: { onClick: fn() }

    만약 저처럼 argTypes에서 action 키가 제대로 인식되지 않는 상황이라면, argsfn()만 작성해도 강의 내용처럼 액션 로그를 확인하는 데 문제가 없는 것인지 궁금합니다.

  3. action: 'clicked'를 사용하는 이유: 단순히 이벤트를 연결하는 것 외에 action이라는 키를 통해 'clicked'라는 라벨을 따로 지정해주시는 특별한 이유가 있으신가요?

버전 차이 때문인지 제가 타입을 잘못 다루고 있는 것인지 몰라 질문 남깁니다. 답변 부탁드립니다!

react typescript tailwindcss storybook ui-testing

Answer 1

0

jasonkang

안녕하세요! 좋은 질문 감사합니다.

각각의 질문에 답변을 드려보자면

  1. action 키가 뜨지 않는 것은 Storybook 버전이 올라가면서 MetaStoryObj의 타입 정의가 훨씬 엄격해졌기 때문인 것 같습니다. 최신 버전에서는 argTypes 내에서 문자열로 액션을 지정하는 방식보다, 실제 함수를 할당하는 방식을 권장합니다. 따라서 TypeScript 환경에서는 유효하지 않은 속성으로 간주되어 자동 완성이 나타나지 않을 수 있습니다.

  2. fn() 만 사용하셔도 됩니다. 최신 버전에서는 오히려 권장하는 방식입니다.

  3. action: 'clicked'를 사용하는 이유는 가독성 때문입니다. 클릭이라는 액션이 가능하다는 것을 명시적으로 작성해 주는 것이라고 보시면 됩니다.

스토리북에 대해서

0

57

1

storybook setup

0

86

2

실무 적용 관련해서 질문이 있습니다!

0

63

2

storybook 프로젝트 세팅 중 궁금한 점이 있습니다.

0

133

2

스토리북 테스트에 대한 질문

0

101

2

tailwind 4.x 버전 변경된 CSS 추출(?) 커맨드

1

207

2

스토리북 테마에 대해 질문 드립니다.

0

158

2

테일윈드를 안쓰고 스타일 컴포넌트만 사용하는 환경에서는요?

0

144

2

[질문 x 공유용] tailwind v4.0 으로 강의랑 다를 때 (import 다름, tailwind.config.js 없어짐 등)

6

484

2

react-toastify 를 storybook에 출력 시키기

0

181

1

react에서 modal & portal 사용시 에는 어떻게 작성해야될까요

0

374

3

tsconfig

0

180

1

vite 초기설정

0

344

2

스토리 내 args에서 에러가 발생합니다.

0

208

2

Nextjs에서 tailwind를 사용할 때

0

278

2

제공해주시는 Figma 색상 코드가 강의와 달라 글 남깁니다!

0

141

2

Visual Test

1

127

1

NavigationBar 배경색

0

129

1

defaultValue 질문 드립니다!

0

123

1

svg를 public 말고 src>assets안에 넣는다면 import를 어떻게해야하나요?

1

265

2

index.tsx 빌드 오류

0

371

2

tailwind css 코드 스플릿팅이 가능한가요?

0

279

1

StoryBook 관련 궁금 사항입니다.

1

260

1

type-error 해결 방법 질문

2

406

4