[React] Image Preloading

Image Preloading

Preload는 페이지를 전환하면 바로 데이터를 볼 수 있도록 미리 데이터를 로드하는 방식.

 

pokedex의 퀴즈에서 문제로 제시되는 이미지가 다음이 이미지로 넘어갈 때마다 새로 로드하기 때문에

이미지에 따라 아래 선택지 보다 늦게 로드되거나, 화면이 순간 깜빡하는 현상이 발생한다.

 

이를 해결하기 위해서 preload를 적용하여 현상을 해결해보았다.

 

문제를 생성하는 곳에서

useEffect(() => {
    const imageList: HTMLImageElement[] = [];
    pokemonQuestion.forEach((question) => {
      const image = new Image();
      image.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${question.id}.png`;
      imageList.push(image);
    });

    setPokemonImage(imageList);
    console.log(imageList);
}, [pokemonQuestion]);

문제들이 새로 생성될때 마다 해당 문제의 이미지를 먼저 HtmlImageElement로 만들어준다.

 

그리고 각 문제 이미지들을 하위 컴포넌트에 props로 전달되어 사용되는데,

아래와 같이 Element 객체를 직접 넣으려고 하면 문제가 발생한다.

<S.QuizImage isEasy={difficulty === "easy"}>{image}</S.QuizImage>

그래서

useEffect(() => {
    if (divRef.current?.children.length != 0)
      divRef.current?.removeChild(divRef.current?.children[0]);
    if (image) divRef.current?.appendChild(image);
}, [image]);

useRef를 통해 특정 DOM을 선택하여 appendChild를 통해 Element를 넣어주었고,

다음 문항에서는 현재 이미지를 지우고 다음 문제의 이미지를 넣어주도록 구현하였다.

 

Before

Preloading 적용전

After

Preloading 적용후

이미지 파일의 크기가 그렇게 크지 않아 뚜렷한 성능 개선은 아니지만,

어색한 느낌을 지울 수 있었다.

 

고민

현재 위에서 진행한 퀴즈는 10문제로 고정되어있는 타입의 퀴즈라 문제 생성 당시 10개의 파일을 다운로드하는 것은 문제가 되지 않는다고 판단했다.

하지만 Unlimit Mode라고 만들어둔 퀴즈는 총 152 문제가 틀릴때 까지 진행되는 퀴즈다.

이 퀴즈에서는 오히려 초반에 152장의 이미지를 preload하는 것이 리소스 낭비가 될 것 같다는 생각이 들었다.

이럴 땐 어떤 방식으로 해결해야 할지 고민이 된다.

 

추가) Lazy Loading

Lazy Loading은 블로그로도 한번 내용을 정리한 기억이 있는데,

초기 로드 단계에서 모든 리소스를 다 로드하는 것이 아니라 현재 당장 필요하지 않은 데이터의 경우에 늦게 리소스를 로드하는 방식을 말한다. 

Lazy Loading 이란?