타입스크립트에서 이벤트 객체 타입 지정하기

타입스크립트로 리액트 프로젝트를 진행하다 보면 가장 난감한 것 중 하나가 바로 DOM과 관련된 부분인데요, 문자열이나 정수, 객체 정도는 원시 타입이나 인터페이스로 해결할 수 있지만 DOM은 <HTMLInputElement>같은 특이한 타입들이 존재하기 때문입니다.

const onChangeEmail = e => {
  setEmail(e.target.value);
};

<input onChange = {onChangeEmail} type = "email"/>

위 코드의 이벤트 콜백 인자 e의 타입은 과연 무엇일까요?

아마 e가 정확히 어떻게 생겼는지 알 수 없으니 any타입을 사용하시는 분도 많을 텐데요, 정확한 답은React.ChangeEvent<HTMLInputElement>입니다.

 

이걸 도대체 어떻게 알까 싶지만, 사실 여기에는 규칙이 하나 있습니다.

이벤트에도 마우스 클릭, 키보드 키 누르기 등등 여러 종류가 있음은 아실텐데요, 이 중에서 사용할 이벤트와 일치하는 이벤트를 선택합니다.

React.Event를 치고 코드 자동완성을 시도하면 적용할 수 있는 이벤트의 목록이 나타납니다.

위 코드에서는 onChange 이벤트를 활용하려 하니, 이벤트 타입 목록 중에서 ChangeEvent를 선택합니다.

const onChangeEmail = (e: React.ChangeEvent) => {
  setEmail(e.target.value);
};

<input onChange = {onChangeEmail} type = "email"/>

다음으로는 제네릭을 통해 이벤트를 활용하는 HTML 노드의 타입을 지정해줍니다.

HTML까지 치고 코드 자동완성을 시도하면 HTML 요소 타입 목록이 나타납니다.

input 태그에서 onChange 이벤트를 사용하려 하니, HTMLInputElement 라는 타입을 찾아 제네릭으로 전달합니다.

const onChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
  setEmail(e.target.value);
};

<input onChange = {onChangeEmail} type = "email"/>

만약 input 태그가 아니라 textArea 태그에서 사용하려 한다면 제네릭 인자를 HTMLTextAreaElement로 바꿔주면 되며, onChange 이벤트가 아니라 마우스 클릭 이벤트라면 이벤트 타입을 React.MouseEvent<클릭할 요소 타입> 이런 식으로 바꿔주시면 됩니다!

📝 요약

• 이벤트 인자 타입을 지정하려면 먼저 이벤트의 타입을 찾으셔야 합니다.
• 이벤트의 타입을 찾았다면, 해당 이벤트를 발생시키는 요소를 제네릭 인자로 전달하세요!