이벤트에 대한 타입을 지정할 때 궁금한 점이 있습니다.

Question

보통 window.addEventListener 같은 것을 사용할 때 이벤트 파라미터에 대해서는 Event 타입을 사용하시고, 버튼 같은 클릭 이벤트 리스너의 이벤트 파라미터에 대해서는 SyntheticEvent 타입을 사용하시는 것 같습니다. 보통 클릭이라고 하면 MouseEvent<HTMLButtonElement> 또는 MouseEventHandler로 함수의 타입을 줄 수 있을 것 같은데 SyntheticEvent로 지정하시는 이유가 있으실까요. 대략적으로 SyntheticEvent가 여러 브라우저 등 호환성을 위해 React에서 자체적인 내장 인터페이스로 추상적으로 Vanilla JS의 Event 타입을 확장한 것으로 인지는 하고 있습니다.

jaenam · Answer

이건 제가 고쳐나가야 할 문제입니다. 변명이 될 수도 있을 것 같지만, 제가 왜 이런 방식을 써왔는지를 제 경험을 토대로 말씀드려 볼게요. React에서 제공하고 있는 event 타입의 종류는 제법 많습니다. https://react.dev/reference/react-dom/components/common 그런데 이들에 대한 타입이 전부 처음부터 딱 이렇게 정해지지는 않았습니다. 초기에는 대표적인 몇가지 이벤트 타입만 정의되어 있었다가, 이후 점차 늘어 지금의 형태를 완성하게 되었죠. 그래서 과거에는 아직 미완성인 구체적 이벤트 타입보다는 SyntheticEvent를 사용하는 편이 여러모로 나았습니다. 새로 정의된 타입을 적용하려고 하면 브라우저에서는 구현되어 있음에도 타입정의에 빠져있는 프로퍼티 때문에 문제가 되는 경우가 빈번했거든요. 물론 그 당시에 들인 습관을 아직까지 그대로 사용하고 있는 것은 제 스스로 부끄러운 일입니다. 질문자님께서 말씀하신 방식이 타입스크립트를 훨씬 잘 사용하는 방식이라고 생각해요. 덕분에 저도 오래된 습관을 고쳐볼 기회로 삼아봐야겠네요. 감사합니다!