LazyLoad란?

LazyLoad는 페이지를 읽어들이는 시점에서 중요하지 않은 리소스 로딩을 이후에 하는 방식으로 스크롤을 내리면서 필요한 부분에서 소스를 로드하는 것.

이미지 수십장을 보여주는 페이지가 있으면 모든 이미지가 로드될때까지 기다리는 것이 아니라 보여지는 맨 윗부분 먼저 일단 로드를 하고 스크롤을 내릴때마다 필요한 이미지를 로드하여 데이터 낭비를 방지하는 것이다.

PreLoad란?

PreLoad는 페이지를 보여줄 때 미리 리소스를 받아놓는 것.
가령 페이지에 이미지 10장이 있으면, PreLoad의 경우에는 모든 데이터를 미리 로드해 놓고 대기하는 방식이다. useEffect를 이용하면 미리 이미지를 다운받아놓고 필요한 순간에 한번에 보여주는 것이다.

const PRELOADED_IMAGES: HTMLImageElement[] = [];

export const preloadImage = (images: string[]) => {
  images.forEach((el) => {
    const img = new Image();
    img.src = el;
    img.onload = () => {
      PRELOADED_IMAGES.push(img);
    };
  });
};

import { useRouter } from "next/router";
import { useEffect } from "react";
import { preloadImage } from "../../src/commons/libraries/preloadImage";

const PRELOAD_IMAGES = [
  "https://upload.wikimedia.org/wikipedia/commons/9/96/%22Den_kjekke_gutt%22_-_6._Internasjonale_Akademiske_Vinterleker_%281939%29_%2840200856483%29.jpg",
];

export default function ImagePreloadPage() {
  const router = useRouter();

  useEffect(() => {
    preloadImage(PRELOAD_IMAGES);
  }, []);

  const onClickMove = () => {
    void router.push("/32-06-image-preload-moved");
  };

  return <button onClick={onClickMove}>페이지 이동하기</button>;
}

export default function ImagePreloadMovePage() {
  return (
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/%22Den_kjekke_gutt%22_-_6._Internasjonale_Akademiske_Vinterleker_%281939%29_%2840200856483%29.jpg" />
  );
}

위 예제를 보면 useEffect가 실행될 때 preloadImage함수가 실행되어 이미지를 미리 로드시켜 변수에 저장시켜 놓고 페이지 이동시 이미지 다운로드가 발생하지 않게 된다.