[React] LazyLoad vs PreLoad

LazyLoad

LazyLoadImage 사용할 준비가 된 여러 효과가가 포함되어 있으며 응용 프로그램에 시각적 캔디를 추가하는데 유용하지만 , 필요하지 않거나 자체 효과를 구현하려는 경우에는 완전히 선택사항입니다.

import React from "react";
import LazyLoad from "react-lazyload";

export default function SangsooLazyLoadPage() {
    return (
        <div>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://mblogthumb-phinf.pstatic.net/20160607_272/rkddnjs425_1465282157808GPv7F_JPEG/3.jpg?type=w2" />
            </LazyLoad>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://img.insight.co.kr/static/2021/11/17/700/img_20211117073048_460a9s06.webp" />
            </LazyLoad>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://cdn.nbntv.co.kr/news/photo/202111/940748_49072_321.png" />
            </LazyLoad>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://dispatch.cdnser.be/wp-content/uploads/2017/04/f453c6ba8a967ce41268f12cc67f58f1.jpg" />
            </LazyLoad>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://file.mk.co.kr/meet/neds/2018/03/image_readtop_2018_187905_15217842223249139.png" />
            </LazyLoad>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://cdn.mhns.co.kr/news/photo/201704/48346_87545_047.jpg" />
            </LazyLoad>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://w.namu.la/s/f06088adaa41d9a5295a2cfe9cebed4542ffa433abf59ddff1b095a6da9cc84268fd84c0ae899491bbb278b14e680d627265e3a6cc14388a49610346978de5c04ffd23b969ec17293b63d50d3fa9901c8316ed6e5ad90b1804ff9bac03e7807e" />
            </LazyLoad>
            <div className="filler" />
            <LazyLoad height={500} offsetVertical={500}>
                <img src="https://post-phinf.pstatic.net/MjAxNzA3MThfMjIg/MDAxNTAwMzQ3Nzg3NzY4.HV7x9ypcpiXPNiVbWVdjM00alkzSyWnVOP8Zu3URU50g.6JPI0nugdIEOrgcKLi0xh4BrmaA2wl54nyBoDzTK-fAg.PNG/%EC%A0%95%EC%83%81%EC%88%98.png?type=w1200" />
            </LazyLoad>
            <div className="filler" />
        </div>
    );
}

PreLoad

사진을 미리 다운 받아 놓고 기다리다가 버튼을 누르거나 페이지가 변경되면 바로 사진을 보여주는 방법

useEffect를 이용해서 사진을 다운 받고 기다렸다가 원하는 순간 다운로드된 사진을 보여주는 방법으로 빠르게 사진을 보여줄 수 있다
이용자가 느끼기에 훨씬 빠르게 사진을 받아 볼 수 있어서 만족스러운 사용감을 준다

import { useEffect, useRef, useState } from "react";
import React from "react";
// import LazyLoad from "react-lazyload";

export default function imagePreloadPage() {
    const [imgTag, setImgTag] = useState<HTMLImageElement>();
    const divRef = useRef<HTMLDivElement>(null);
    // const [isLoaded, setIsLoaded] = useState(false);

    // <img src=""> 이미지 태그가 있다 .

    useEffect(() => {
        const img = new Image();
        img.src =
            "https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/081/003/903/81003903_1510904521637_1_600x600.JPG/dims/resize/Q_80,0";
        img.onload = () => {
            setImgTag(img);
        };
    }, []);

    const onClickPreload = () => {
        if (imgTag) divRef.current?.appendChild(imgTag);
        // document.getElementById("aaa")?.appendChild(imgTag);
    };

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