LazyLoad vs PreLoad

LazyLoad

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

PreLoad

• 페이지를 읽어들일 때 미리 리소스를 받아놓는 기술이다.
• 예를 들어 이미지가 10장이 넘는 페이지가 있다고 가정해보자.
• LazyLoad의 경우에는 필요할 때마다 데이터를 로드하는 방법이라면, PreLoad의 경우에는 모든 데이터들을 미리 로드해놓고 대기하는 방식이라 보면 된다.

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>
)
}