[react ] 리액트- 타입에서 img의 onError 에 대체 이미지를 넣으려면 "event: SyntheticEvent<HTMLImageElement> " 하면 된다.

간단 정리

자바스크립트에서 사용되는 이벤트 핸들러인 onclick 이나 onchange 등과 같은 이벤트 핸들러는 브라우저 마다 이벤트의 구현이나 동작들이 다를 수 있다. 

 

하지만 리액트에서는 모든 브라우저에서 공통되게 이벤트 핸들러가 작동할 수 있도록 감싸주는 래퍼 객체가 존재한다.

 

래퍼 객체의 예시로는 onClick 같은 경우에는 MouseEvent 가 있고, onChange 는 ChangeEvent 가 그것이다.

 

다시돌아 와서 img의 이벤트는 앞서 MouseEvent  와 같이 일치하는 이벤트 래퍼 객체가 없기 때문에,

 

모든 이벤트 래퍼 객체의 시작이라고 할 수 있는 최상위 래퍼 객체인 SyntheticEvent 를 사용하여 정의한다.

 

따라서 이러한 이유에 따라 다음과 같이 img 의 이벤트 타입을 지정해주면 정상적으로 img 내 onError 의 함수가 실행된다.

import React, {SyntheticEvent} from 'react'; //래퍼 객체를 import 해 와야 함


const 컴포넌트 = ()=>{

const imageOnErrorHandler = (e:SyntheticEvent<HTMLImageElement>) =>{
      e.currentTarget.src = '/not_find_img.png' 
      
      // e.target X => e.currentTarget
  }
  
  
  return ( // 중략
  
        <img
            className="detail_img"
            alt="영화이미지"
            width={400}
            height={500}
            src={`https://image.tmdb.org/t/p/w500${detailInfo.poster_path}`}
            onError={imageOnErrorHandler}> 
        </img>
  
  
     //중략
  )