React + Typescript (2) React.FormEvent 사용하기

리액트 + 타입스크립트를 이용하여 간단한 양식 제출 로직을 만들어보겠다.

React.FormEvent

submit 이벤트를 처리하기 위해 함수를 만들었다.

const submitHandler = (e) => {}

하지만 이 코드는 e 매개변수에서 오류가 발생한다.
이유는 간단하다.
타입스크립트는 타입을 명시해야 하는데 e 매개변수가 any 타입이기 때문에 타입을 명시하라는 것이다.
여기서 e는 이벤트를 처리하기 위한 함수의 매개변수다 그렇기 때문에 object 타입을 갖는다.
이는 리액트 패키지가 이미 정의를 해두었는데 그것이 바로
React.FormEvent이다.

이 객체 타입은 폼 제출 이벤트를 수신하면 자동적으로 받게되는 타입이다.
이제 e는 폼 제풀 이벤트 객체로 인식되고 .preventDefault()와 같은 함수도 자동완성이 지원된다.

const submitHandler = (e) => {
    e.preventDefault();
}

타입스크립트는 조금은 성가신 부분이 있지만
잘 구축해두면 개발 효율이 향상되는 것이 느껴지는 것 같다.

비슷한 event 객체로는
MouseEvent 객체가 있다.