[28]_Lazyload, Preload

1. Lazyload
   Lazyload란 자바스크립트를 로드해서 실행하는 것이 아니라 페이지 로드가 이루어지고 나서 조금 늦게 이미지를 로드하는 방식임. 즉 페이지를 렌더링 할때 이미지까지 전부렌더링하는 것이 아니라 스크롤을 내릴 때 그때그때 추가로 로드하는 형식

2. Lazyload 구현방법
   React Lazy load라는 라이브러리가 있음.

3. Preload
   Preload란 페이지를 전환하면 바로 데이터를 볼 수 있도록 미리 로드하는 방식.

4. Preload 구현방법

export default function ImagePreloadPage() {
  const [imgTag, setImgTag] = useState<HTMLImageElement>();
  const divRef = useRef<HTMLDivElement>(null);

  // 홈페이지 들어오자마자 다운로드 받고
  useEffect(() => {
    const img = new Image();
    img.src = "/220426/1.jpg";
    img.onload = () => {
      setImgTag(img);
    };
  }, []);

  // 누르는 순간 useEffect에서 다운받은 사진이 보여지기만 함
  const onClickPreload = () => {
    if (imgTag) divRef.current?.appendChild(imgTag);
  };
  return (
    <div>
      <div ref={divRef}></div>
      <button onClick={onClickPreload}>이미지 프리로드</button>
      ================================================================
    </div>
  );
}