재사용하기 좋은 React 컴포넌트를 만드려 한다면, 발생할 수 있는 에러 케이스들을 최대한으로 커버할 수 있도록 견고하게 만들어야 한다.
// show alt text
<img src="wrong-src" alt="alternative text" />img 태그의 src 값이 유효하지 않을 경우, alt attribute에 입력한 텍스트가 표시된다. 하지만 이는 화면이 깨진 느낌이고 스무스(Smooth)한 UX와 거리가 있다고 생각한다.
// set src to fallback image on error
<img src="wrong-src" onError={(event) => {
event.currentTarget.src = defaultImageSrc;
}} />img JSX의 에러 핸들러(onError)를 통해 src 값을 fallback 이미지 src로 변경해주면 alt 텍스트를 fallback 이미지로 대체 할 수 있다.
// works but wrong approach (+ does not work with typescript)
<img src="wrong-src" onError={(event) => {
event.target.src = defaultImageSrc;
}} />이렇게 event.target을 사용해서 src를 변경하면 안되고 event.currentTarget을 사용해야 한다. event.target은 에러 이벤트가 발생한 요소의 자녀 요소도 참조 할 수 있고 currentTarget은 에러가 발생한 img 요소만을 참조하기 때문에 차이가 있다.
만약 타입스크립트를 사용한다면 target 사용은 타입 에러를 발생시킨다. 이것이 잘 이해되지 않는다면 event.target과 event.currentTarget의 차이에 대해 알아보는 것이 도움이 될 수 있다.
// don't forget to add alt!
<img src="wrong-src" alt="alternative text" onError={(event) => {
event.currentTarget.src = defaultImageSrc;
}} />MDN에서 alt 프로퍼티 사용의 가장 큰 이유는 접근성 때문이라고 이야기한다. 스크린 리더기를 통해 소리만으로도 파악하기 쉽도록 텍스트 값을 설정하는 것이 좋다. 이미지로 fallback 처리를 하더라도 alt를 포함시켜주는 것이 최선이다.
// Wrapper component
<Image src="wrong-src" alt="alternative text" fallback={fallbackImage} />Wrapper component 만들어 fallback을 살짝 더 깔끔하게 사용할 수도 있다.
// HTML img tag
<img src="wrong-src" alt="alternative" onerror="this.src='./default-img.png';" />리액트가 아닌 HTML 태그에서는 onerror에서 this에 접근하여 src를 변경하는 방법이 있다.
