데이터는 user의 웹사이트 사용 패턴에 따라 로딩하는 방법을 선택할 수 있다.

데이터 로딩 방법인 LazyLoad와 PreLoad에 대해 살펴보자!

1. LazyLoad

LazyLoad란, 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추후에 하는 기술로 스크롤이 내려가면서 필요한 때가 되면 로드가 되는 것을 말한다.

이미지 10장이 있는 페이지에서 모든 이미지가 로드될 동안 기다려야한다면 User는 불편함을 느끼게 된다. 따라서 User가 보게 되는 맨 위 첫 화면의 이미지만 가장 먼저 로드를 한 후, 스크롤을 내리며 이미지가 보여질 때마다 이미지를 로드하는 방식인 LazyLoad를 사용할 수 있다.

[ LazyLoad 라이브러리와 여러 이미지 라이브러리]

(1) React-lazy-load : LazyLoad 라이브러리

react-lazy-load는 스크롤을 내리면 해당 이미지가 들어가있는 컴포넌트가 등장할 때 사진을 다운받도록 도와주는 라이브러리이다.

(2) React-dropzone

react-dropzone은 이미지를 drag & drop으로 첨부할 수 있도록 도와주는 라이브러리이다.

(3) React-avator-editor

react-avator-editor는 첨부된 이미지를 웹 상에서 편집할 수 있는 기능을 제공하는 라이브러리이다.

2. PreLoad

PreLoad란 LazyLoad와 달리 페이지를 읽어들일 때 미리 리소스를 받아놓는 것이다.
모든 데이터들을 미리 로드해놓고 대기하는 방식이므로, User가 처음부터 모든 데이터가 필요한 케이스에서 사용할 수 있다.

import { useEffect, useRef, useState } from "react";

export default function ImagePreloadPage() {
  const [isLoaded, setIsLoaded] = useState(false);
  const [imgTag, setImgTag] = useState<HTMLImageElement>();

  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const img = new Image();
    img.src =
      "https://upload.wikimedia.org/wikipedia/commons/9/96/%22Den_kjekke_gutt%22_-_6._Internasjonale_Akademiske_Vinterleker_%281939%29_%2840200856483%29.jpg";
    img.onload = () => {
      setImgTag(img);
    };
  }, []);

  const onClickPreload = () => {
    if (imgTag) divRef.current?.appendChild(imgTag);
  };

  const onClickLoad = () => {
    setIsLoaded(true);
  };

  return (
    <>
      <div ref={divRef}></div>
      <button onClick={onClickPreload}>이미지 프리로드</button>
      ========================================================
      {isLoaded && (
        <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/%22Den_kjekke_gutt%22_-_6._Internasjonale_Akademiske_Vinterleker_%281939%29_%2840200856483%29.jpg"></img>
      )}
      <button onClick={onClickLoad}>이미지 일반로드</button>
    </>
  );
}

위 코드는 PreLoad한 이미지의 경우 버튼을 클릭하면 따로 데이터 받아오는 과정 없이 바로 이미지가 뜨는 것을 확인하기 위해 useRef를 활용하여 구현하였다.
아래의 이미지 일반로드 버튼은 클릭 시 용량이 큰 이미지 데이터를 조금씩 다운받아오는 것을 확인하는 용도로 사용 가능하다!