lazyLoad

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

PreLoad

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

// 프리로드된 이미지를 넣어둘 배열
const PRELOADED_IMAGES = []

export default function ImagePreloadPage () {
	const router = useRouter()
	const divRef = useRef(null)
	
	useEffect(() => {
		const preloadImage = ()=>{
			// image 태그를 생성
			const img = new Image()
			// img 태그의 src에 주소를 넣어준다.
			img.src = PRELOAD_IMAGES
			// img 태그가 onload 되었을 때
			img.onload = () => {
			// 프리로드 된 이미지들을 PRELOADED_IMAGES 배열에 넣어준다.
			PRELOADED_IMAGES.push(img)
			}
		}
		preloadImage()
	}, [])

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


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

이렇게 만들어둔 프리로드 함수는 여기저기서 사용할 수 있으므로 commons 폴더에 빼두는 것이 좋다!