Type '(event: MouseEvent) => void' is not assignable to type 'MouseEventHandler<HTMLDivElement>'.ts(2769)

문제 발생

SearchModal.tsx 에 다음과 같이 onClick 이벤트 리스너를 등록하려고 하는데 발생한 에러입니다.

 

const eventStopPropagation = (event: MouseEvent)=>{
  event.stopPropagation();
};

<ModalBox onClick={eventStopPropagation}>

 

onClick 함수에 다음과 같은 에러 메세지가 발생했습니다.

 

에러 메세지 화면

Type '(event: MouseEvent) => void' is not assignable to type 'MouseEventHandler'.ts(2769)

 

 

 

 

원인

JS에서 기본으로 제공되는 MouseEvent를 타입으로 지정해서 발생한 에러입니다.
React에서 MouseEvent는 반드시 React.MouseEvent를 사용해야 합니다.

 

 

 

해결 방법

다음과 같이 코드를 수정합니다.

export const eventStopPropagation = (event: React.MouseEvent)=>{
  event.stopPropagation();
};

 

 

더하여, 이벤트 핸들러를 선언할 때, 이벤트 타입/함수 타입은 다음과 같이 선언합니다.

// 이벤트 타입 선언
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
};

// 함수 타입 선언
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
};

 

 

 

 

참고 사이트

[React/TS] 이벤트 핸들러 함수의 타입