TS 탐험기 2

e : React.MouseEvent 이벤트 타입.

오늘은 callback 함수를 인자로 받기위한 타입을 설정해주는 과정에서 새로운 놈(?)을 발견했다!🧐

바로 이녀석. 이놈에 대해 한번 알아보고자 한다.

Basic Event Handling

기본적으로 react는 개별적인 이벤트 시스템을 가지고 있다. 그렇기 때문에 일반적으로 typical MouseEvents이나 이와 유사한 element를 사용하지 못한다. 사용하려면 React의 특정한 버전이 필요하다.
다행히도 표준 DOM에서 적절한 이벤트, 동등한 React 타입을 얻을 수 있다.

React.( AnimationEvent, ChangeEvent, ClipboardEvent, CompositionEvent, DragEvent, FocusEvent, FormEvent, KeyboardEvent, MouseEvent, PointerEvent, TouchEvent, TransitionEvent, WheelEvent.....) 등의 이벤트들을 표준 DOM에서 제공해줌.

Restrictive Event Handling

이벤트 핸들러를 특정 요소로 제한하려는 경우 generic 을 이용하여 보다 구체적으로 지정할 수 있음.

handleClick(event: React.MouseEvent<HTMLButtonElement>) {
  //여기서 event는 MouseEvent중에서도 HTMLButton Element에서만 동작.
  event.preventDefault();
  alert(event.currentTarget.tagName); 
  }

InputEvent?

Ts에서의 예외적인 부분이다. Ts의 입력에서는 InputEvent가 지원 되지 않는다..! 왜냐하면 InputEvent가 아직 정식 인터페이스가 아니고 모든 브라우저에서 완전히 지원되는 것이 아니기 때문이라고 한다... 그래서 모든 입력 요소에서 onInput 속성을 사용하면 onInput의 인터페이스에서 이벤트 인터페이스에 any가 사용되는 것이다..!