PreLoad

페이지를 읽을때 미리 받는 방식

import { useRef, useState } from 'react'

const imageUrls = [
    "/images/cat1.jpg",
    "/images/cat2.jpg",
    "/images/cat3.jpg",
    "/images/cat4.jpg",
    "/images/cat5.jpg",
    "/images/cat6.jpg",
    "/images/cat7.jpg",
    "/images/one.jpg",
    "/images/two.jpg",
    "/images/three.jpg",
]

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

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

    return (
        <>
            <div><button onClick = { onClickPreLoad }>이미지 보여주기</button></div>
            <div ref = { divRef }></div>
            <img src = '/images/dog1.webp' alt = 'dog' />
        </>
    )
}

LazyLoad

바로 보여주지 않고 보일때마다 로드되어 데이터를 받아오는방식

import LazyLoad from 'react-lazyload'

const imageUrls = [
    "/images/cat1.jpg",
    "/images/cat2.jpg",
    "/images/cat3.jpg",
    "/images/cat4.jpg",
    "/images/cat5.jpg",
    "/images/cat6.jpg",
    "/images/cat7.jpg",
    "/images/one.jpg",
    "/images/two.jpg",
    "/images/three.jpg",
]

export default function QuizImageLazyLoadPage() {
    return (
        <>
            <div>
                { imageUrls.map((el, index) => (
                    <LazyLoad key = { index } height = { 500 }>
                        <img style = {{ width: "500px", height: "500px" }} src = { el } alt = "image" />
                    </LazyLoad>
                )) }
            </div>          
        </>
    )
}