LazyLoad & PreLoad

Lazyload
페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추후에 하는 기술
스크롤을 할 때 스크롤을 내리면서 이미지가 보일 때만 이미지를 로드하면 데이터의 낭비를 막을 수 있음

https://www.npmjs.com/package/react-lazyload
react-lazyload 라이브러리를 사용하면 편리하다.

import LazyLoad from "react-lazyload";
const App = () => {
return (

<div className="list">
  <LazyLoad height={200}>
    <img src="tiger.jpg" />
  </LazyLoad>     
</div>

);
};
lazyload 컴포넌트 안에 로드할 데이터 컴포넌트를 넣고 가장 상위 div 같은걸로 감싸면 된다

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>

)
}