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