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

[Kim-DaHam]

Bug Report

개요

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

<ModalBox onClick={eventStopPropagation}>

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

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

📸 Screenshots

💻 Code

이벤트 함수 코드

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

🙁 Actual behavior

MouseEvent 타입을 지정했는데도 타입이 맞지 않는다는 에러가 발생합니다.

🙂 Expected behavior

함수가 정상적으로 등록되면 좋겠습니다.

[Kim-DaHam]

해결 방법

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) => {
};

🎁 참고 사이트