React img 태그 기본 이미지 설정

Img 태그에 이미지를 넣을 때면, 서버의 static data 를 활용하거나 blob 형식으로 이미지를 요청한다. 하지만 늘 그렇듯 우리는 에러에 대처를 해야하고, 이미지 태그에도 만일 서버에서 불러오지 못한다면 넣어둘 기본 이미지를 설정해둔다. 해결한 방법은 아래의 코드로 작성했다.

const onErrorImg = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
    e.currentTarget.src = defaultImg;
  }, []);

 <NewsImg
          src={''}
          alt=""
          height="100px"
          onError={(e) => {
            onErrorImg(e);
          }}
        ></NewsImg>

사실 이게 어렵진 않았고, 여기서 한동안 나를 고생시켰던 버그가 있었다.

 const onErrorImg = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
    e.target.src = defaultImg;
  }, []);

위의 코드와 달라진게 있다면 currentTarget 을 target 으로 바꼈다. 기존에 코드를 작성할 때 target 으로 했더니 type error 가 나서 한동안 as 로 처리 해두고 넘겼었는데, 원인을 알아내어 해결할 수 있었다. 이렇게 비교하고 나니 정말 간단하지만, e.target 으로 할경우 그 대상이 이미지 태그임을 보장할 수 없다.(버블링, 캡쳐링.. ) 그렇기에 이미지 태그임을 보장하려면 currentTarget이라 써줘야한다.