[React] 새로고침 시 이미지 로고 깜빡임 해결하기 (Image 와 img 태그 차이)

웹 사이트에서 로고를 클릭하면 새로고침되며 이미지 박스가 먼저 보임 > 1초 후 로고 로딩되는 문제가 발생했다. 큰 문제는 아니지만, 사용자에게 신뢰를 저하시킬 수 있는 부분이라 판단되어 수정을 진행하였다.

 

 

 

깜빡임 원인

Image 컴포넌트를 사용하였고, Image 컴포넌트가 blob을 비동기로 가져오는 동안 blobSrc 가 빈 문자열이라 깜빡임이 발생하였다. 

 

 

 

 

Image 와 img 태그의 차이

Image 컴포넌트

• 인증 토큰을 헤더에 포함해 fetch 로 이미지를 가져옴
• 응답을 Blob 으로 변환
• URL.createObjectURL() 로 메모리 URL 생성
• URL 을 img 태그의 src 로 이용

 

 

* Blob (Binary Large Object) 이란?

Blob 은 데이터 덩어리를 브라우저/JS 에서 다루기 위한 객체. 이미지, 동영상, 파일 같은 것들을 통째로 들고 있는 데이터 박스

 

 

img 태그

• src 경로를 직접 사용
• 브라우저가 바로 이미지 로드
• 추가 변환 과정 없음

 

 

 

 

해결

사이트의 로고는 정적 이미지이므로 Image 대신 일반 img 태그를 사용하는 것이 낫다. 

 

<img
    className="logo_img"
    src={LogoImg}
    height="27"
    width="70"
    style={{ display: 'block' }}
/>