📋 타입스크립트에서 이벤트 객체 타입 지정하기
타입스크립트에서 이벤트 객체에 접근할 때는 타입을 명시해주어야 한다.
타입을 명시하지 않을 경우 any 타입이 암시적으로 포함된다고 하지만 any를 쓰는 순간 타입스크립트를 사용하는 의미가 사라진다.
이벤트 객체의 타입을 지정하는 방법은 아래와 같다.
아래 지정방법을 설명하자면 규칙이 존재한다.
이벤트에는 마우스, 키보드 등등 여러 이벤트가 있기 때문에 사용할 이벤트와 일치하는 이벤트를 지정하면 된다.
그 다음 제네릭을 사용해 이벤트를 사용하는 HTML 노드의 타입을 지정해주면 된다.
- 타입 지정 방법
event : React.이벤트 종류<HTML 노드>더 자세한 예시를 살펴보자.
인풋 태그에 이름 입력 후 로그인 하기 위해 제출한다고 가정해보자.
const App = () => {
const [username, setUsername] = useState("");
const handleChange = (e : React.ChangeEvent<HTMLInputElement>) => {
setUsername(e.currentTarget.value);
}
const handleSubmit = (e : React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log(`hello ${username}`);
}
return (
<div>
<form onSubmit={handleSubmit}>
<input type='text' value={username} onChange={handleChange} />
<button>Login</button>
</form>
</div>
)
}input 태그는 onChange 이벤트를 사용하기에 타입으로 changeEvent를 주었고, input 노드에서 발생하기에 input 요소를 제네릭으로 전달해준 것이다.
이벤트 발생 대상이 버튼이라면 자동완성 기능을 통해 HTMLButtonElement, textarea라면 HTMLTextAreaElement를 지정하면 되는 것이다.
Form 태그의 onsubmit 이벤트도 위 내용과 같은 맥락이기 때문에 FormEvent를 지정해 주었다.
최종 정리해보면 이벤트 객체의 타입을 지정하기 위해선 먼저 어떠한 이벤트를 발생시켰는지 확인해야한다.
이벤트 타입을 찾았다면 해당 이벤트를 발생시키는 요소를 제네릭으로 전달한다.
또한 강의를 들으며 예시 코드를 작성해볼 때 currentTarget에 대해 알게 되었다.
target과의 차이점에 대해 알아보니 target은 실제 이벤트가 발생하는 요소, currentTarget은 이벤트 리스너가 달린 요소라고 한다.
아직 개념이 잘 와닿지 않아 이벤트 버블링에 대해 공부할 계획이다.
참고
