React- 이미지 로드 지연 해결 (프리로드의 한계와 대안)

주인장이 운영 중인 사이트(https://www.mezzang.com/random-class)에서 "랜덤 직업 뽑기" 기능을 만들었는데,

 

뽑기 버튼을 처음 누르면 이미지 렌더링이 덜 되어 카드의 기본 배경(background)만 잠깐 보이는 문제가 발생했다.

한 번 뽑고 나면 모든 이미지가 캐시되면서 이런 문제가 사라졌다.

 

 

시도

 

 

처음엔 React의 useEffect를 사용해 이미지를 프리로드하는 코드를 작성했다:

콘솔 로그를 확인해보니 모든 이미지가 로드 완료되었다고 나오는데도, 왜 첫 뽑기에서 렌더링 오류가 생길까?

 

 

---

 

 

일단 프리로드의 한계를 알아보자

useEffect에서 new Image()로 프리로드한 방식에는 몇 가지 한계가 있었다.

 

 

프리로드의 한계

1. 브라우저 캐시에만 저장: new Image()는 이미지를 브라우저 캐시에 저장하지만, React가 DOM에 렌더링할 때 이 캐시가 바로 반영되지 않을 수 있다.
   특히, background-image 스타일이 동적으로 적용될 때 브라우저가 캐시된 이미지를 화면에 바로 그리지 못하고 살짝 지연되는 경우가 생긴다.
2. React 렌더링 파이프라인과의 동기화 문제: 프리로드된 이미지는 React의 가상 DOM과 실제 DOM 간의 렌더링 과정에서 바로 활용되지 않을 수 있다.
   스타일이 적용되는 시점에 이미지 로드가 동기화되지 않아, 기본 배경만 먼저 보이는 현상이 발생한다.

 

 

 

즉, 프리로드는 네트워크 요청 시간을 줄여주지만, React의 첫 렌더링에서 눈에 보이는 효과를 보장하지 못했다.

 

 

 

---

 

 

해결법

 

이 문제를 해결하려면 React가 렌더링에 캐시된 이미지를 바로 활용하도록 해야 했다.

 

그래서 모든 이미지를 DOM에 미리 렌더링하는 방법을 채택했다.

 

• 방법: 페이지에 접속하면 사용자에게 보이지 않도록 display: none으로 숨긴 상태에서 모든 캐릭터 이미지를 <img> 태그로 렌더링한다.
• 효과: React의 초기 렌더링 시점에 이미지를 DOM에 포함시켜, 이후 background-image 적용 시 지연 없이 캐시된 이미지를 바로 표시한다.

이렇게 하면 뽑기 버튼을 처음 눌렀을 때도 캐릭터 이미지가 즉시 나타나며, 기본 배경만 보이는 문제가 해결된다!

 

 

 

display none으로 숨겨주면 끝!

 

 

before(좌) & after(우)