LazyLoad vs PreLoad

LazyLoad

💡 LazyLoad 란?
페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술로 스크롤이 내려가면서 필요한 때가 되면 로드가 되어야 합니다.
예를 들어, 이미지가 10장이 넘는 페이지가 있다고 가정할 때 이미지를 모두 다 로드가 될 때까지 기다리게 된다면, 페이지의 로딩을 길어지게 될 것입니다. 하지만, 맨 위의 화면에 보이는 이미지만 로드를 한 후에, 스크롤을 내리면서 이미지가 보여져야 할 때마다 이미지를 로드한다면, 데이터의 낭비를 막을 수 있습니다!

import React from "react";
import LazyLoad from "react-lazy-load";

export default function MyComponent() {
  return (
    <div>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2017/09/25/13/12/cocker-spaniel-2785074_1280.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="/trick2.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="/trick.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
    </div>
  );
}

react-lazy-load 라이브러리를 이용해보았는데요. 이처럼 현재는 보기 편하기 위해서 2개의 이미지만 적었지만 10개라고 가정했을때 스크롤을 내려야 이미지가 불러와집니다.

---

PreLoad

💡 PreLoad 란?
페이지를 읽어들일 때 미리 리소스를 받아놓는 기술입니다. 위와 같이 예를 들어 이미지가 10장이 넘는 페이지가 있다고 가정합시다. LazyLoad의 경우에는 필요할 때마다 데이터를 로드하는 방법이라면, PreLoad의 경우에는 모든 데이터들을 미리 로드해놓고 대기하는 방식이라 보시면 됩니다!

export default function ImagePreloadPage () {
	const [imgTag, setImgTag] = useState()
	const divRef = useRef(null)

	useEffect(() => {
		const img = new Image()
		img.src = "불러올 이미지 주소를 넣습니다."
		img.onload = () => {
			setImgTag(img)
		}
	}, [])

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


return (
	<div>
		<div ref={divRef}></div>
			<button onClick={onClickPreload}> 이미지 프리로드 </button>
	</div>
)
}