React에서 onChange 이벤트에 대한 Flow Annotation

“onChange” 등에 대한 Flow Annotation 에 어떤 유형을 제공해야 할까요?

다음과 같은 컴포넌트가 있습니다:

import { identity } from 'lodash';

export const Input = ({
  onChange = identity
  //etc.
}: {
  onChange: Event<HTMLInputElement>,
}) => <input onChange={onChange} />

하지만 Flow를 실행하면 다음과 같은 오류가 발생합니다:

onChange = identity,
^^^^^^^^^^^^^^^^^^^ 기본값. class 타입인 Event 대신 다형적인 타입이 기대됩니다.

어디서 Event의 정의를 찾을 수 있는지 헷갈려요.

Event

Facebook의 DOM 타입을 살펴보면, 여기에 target 속성의 타입이 EventTarget인 Event가 있습니다.

EventTarget

하지만 EventTarget의 정의를 살펴보면, value의 정의를 찾을 수 없어요.

EventTarget

합성 이벤트가 target 속성의 타입이 HTMLInputElement인 타입으로 정의되도록 어떻게 할까요?

Flow Annotation해결책

TLadd가 언급한 대로, 원하는 매개변수에는 “SyntheticInputEvent”를 사용해야 합니다. 그러나 이는 타입 인수가 필요하므로 “SyntheticInputEvent<HTMLInputElement>”로 만들어야 합니다.

SyntheticInputEvent<HTMLInputElement>

다른 대안은 Flow 문서를 참조하는 것입니다. “https://flow.org/en/docs/frameworks/react/#adding-types-for-react-events-a-classtoc-idtoc-adding-types-for-react-events-hreftoc-adding-types-for-react-eventsa”에서 자세한 정보를 찾을 수 있습니다. 아래 코드는 onChange 이벤트의 타입을 설정하는 방법을 보여줍니다:

class MyComponent extends React.Component {
  onChange(event: Event & { currentTarget: HTMLInputElement }) {
    // ...
  }
}

Flow에는 합성 이벤트에 대한 기본 정의가 있습니다. 이 경우에 원하는 것은 “SyntheticInputEvent”입니다. onChange의 타입은 다음과 같습니다:

{ 
   onChange: (SyntheticInputEvent) => mixed,
}

이는 “onChange” 함수가 “SyntheticInputEvent”를 가져오고, 반환값 (있을 수도, 없을 수도)을 신경 쓰지 않는다는 것을 의미합니다.

React Native에서 작업하는 경우, 다음 정의를 사용할 수 있습니다:

import { type SyntheticEvent } from "react-native/Libraries/Types/CoreEventTypes";
type TextInputEvent = SyntheticEvent<{ value: string }>;

이를 사용하면 다음과 같이 작성할 수 있습니다:

onChange: (TextInputEvent) => onChange: (TextInputEvent) =>

참고 자료 :

https://stackoverflow.com/questions/45132013/what-type-to-give-flow-annotations-for-onchange-etc

같은 카테고리의 다른 글 보기 :

reactjs