TypeScript | eventListener void 타입 에러 (Feat. onClick)

오늘도 어김없이 에러를 마주했다. 

에러 발생 상황

사용 기술 스택 : Nextjs, Typescript, airbnb style guid

부모 컴포넌트인 Footer 내부에 Map 컴포넌트가 존재한다. (단, Map 컴포넌트는 display: none)
Footer 에서 클릭 이벤트가 발생하면 푸터 컴포넌트 내부의 state 값이 변하면서 (false -> true) Map 컴포넌트가 나타난다.
그리고, Map 컴포넌트 내부에서 클릭 이벤트와 키보드 이벤트가 발생하면 Footer 컴포넌트의 state 값이 변화 (true -> false)하고 Map 컴포넌트가 다시 사라지도록 로직이 구현되어 있다. 

위 로직은 푸터 컴포넌트에서 mapViewState 가 true 이면 Map 컴포넌트가 나타나고, false 이면 Map 컴포넌트가 사라지도록 스타일링 되어 있다. 

그리고 이벤트가 발생하면 handleMapView 라는 함수가 호출되고 이 함수 내부에서 ReactHook 을 사용하여 state 값이 변화한다. 자식 컴포넌트인 Map 컴포넌트에서 이벤트가 발생하면 역시 부모 컴포넌트의 mapViewState 값을 변화시켜야 Map 컴포넌트가 다시 사라지게 구현할 수 있으므로 이를 구현하기 위해 handleMapView 함수를 callback 함수로 자식 컴포넌트에 전달한 다음 자식 컴포넌트에서 onClick 이벤트가 발생하면 해당 callback을 실행하여 부모 컴포넌트의 state 값이 바뀌도록 했다.

기능 구현은 잘 되었지만 아래와 같이 타입에러가 발생하여 서버에서 빌드되지 않는 문제가 있었다.

해결 방법

좌측에서 확인할 수 있듯이 각 이벤트의 type을 지정했지만 지정된 type이 다소 부족하여 이런 에러가 발생했다.

각 이벤트의 타입에 React 객체를 추가하고, callback 함수에도 paramter로 전달되는 이벤트 type을 명시하고 나니 에러를 해결할 수 있었다.

에러 발생 이유

리액트에서의 이벤트 핸들러는 브라우저의 이벤트 핸들러와는 조금 다르다. 

리액트의 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼인 합성 이벤트(SyntheticEvent) 객체를 전달받는다. 즉 `브라우저 이벤트를 포함하고 있는 React의 고유한 이벤트 객체이다. `

따라서 type 을 지정할 때도 이러한 점을 고려하여 React 객체를 추가해줘야 하는 것이다. 

참고 자료

https://soufiane-oucherrou.medium.com/how-pass-function-as-props-to-child-in-react-and-typescript-2fafafa6a945

How Pass Function as Props To Child in React and Typescript

https://rjzaworski.com/2018/10/typescript-event-handlers

TypeScript Event Handlers

https://ko.reactjs.org/docs/events.html

합성 이벤트(SyntheticEvent) – React

https://frontcode.tistory.com/60

[REACT] React SyntheticEvent