강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của mimk09059814
mimk09059814

câu hỏi đã được viết

Kiểm tra sách truyện và giao diện người dùng có thể được áp dụng trực tiếp vào thực hành

[Cập nhật] Thay đổi phương thức xử lý sự kiện trong Storybook 8.x

Storybook 10에서 argTypes에 action 설정 시

Viết

·

64

·

Đã chỉnh sửa

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'라는 라벨을 따로 지정해주시는 특별한 이유가 있으신가요?

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

reacttypescripttailwindcssstorybookui-testing

Câu trả lời 1

0

jasonkang님의 프로필 이미지
jasonkang
Người chia sẻ kiến thức

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

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

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

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

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

Hình ảnh hồ sơ của mimk09059814
mimk09059814

câu hỏi đã được viết

Đặt câu hỏi