LazyLoad

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

가령, 이미지 수십장을 보여주는 페이지가 있을때 모든 이미지가 로드될때까지 기다리는 것이 아니라 보여지는 맨 윗부분 먼저 로드를 한 후 스크롤을 내렸을때 그때 그때 필요한 이미지를 로드하여 데이터의 낭비를 막을 수 있다.

PreLoad

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

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}>  Image PreLoad Button </button>
	</div>
	)
}