React) image preload(이미지 미리 불러오기), netlify 배포 후 이미지가 느리게 load되는 문제 해결

문제) 

이미지가 너무 느리게 로드 된다.

 

앞서서 이미지가 너무 느리게 로드되는 문제를 해결하고자 AWS S3를 사용했었다.

하지만, 프리티어 사용 이후에 요금이 나올 수도 있다고 생각해서 다른 해결책을 고민해보기로 했다.

 

React) AWS S3 사용, netlify 배포 후 이미지가 느리게 load되는 문제

 

 

해결 방법) 

이미지 preload를 사용해보려고 한다.

preload는 웹 페이지에 필요한 이미지 파일을 사전에 미리 로드하고, 사용자가 이미지가 필요로 하는 페이지를 방문했을 때 이미지가 더 빠르게 로드 되도록 해준다.

 

 

기존 방식)

각 질문으로 넘어가 때 마다 이미지를 불러왔다.

 

6번 질문으로 넘어오면 해당하는 이미지 로드

문제로 넘어갈 때마다 사진을 요청해서 오래걸린다.

 

 

 

preload 적용 후)

시작 페이지에서 질문에서 사용되는 이미지를 미리 로드했다.

사이트를 들어가면 시작 페이지에서 모든 이미지를 미리 불러온다.

 

 

Code)

 

< question.js >

//question.js 파일

import 김치찌개 from './image/김치찌개.png'
import 된장찌개 from './image/된장찌개.png'
import 고등어무조림 from './image/고등어무조림.png'
import 짜글이 from './image/짜글이.png'

export const optionList = [
    {
        options: ['김치찌개', '된장찌개'],
        imgPath: [ 김치찌개 , 된장찌개]
    },
    {
        options: ['고등어무조림', '짜글이'],
        imgPath: [ 고등어무조림, 짜글이]
    },
]

 

<App.jsx>

 

//기존 코드에 새롭게 추가한 부분.

import {optionList, questionList, resultList} from './questionList';

function App() {

//기존 코드

// 컴포넌트가 처음 렌더링될 때 이미지 preload 작업을 수행합니다.
useEffect(() => {
	preloadImages();
}, []);


const preloadImages = () => {
	// 모든 이미지 경로를 하나의 배열로 합칩니다.
    const images = optionList.reduce((acc, curr) => {
        return acc.concat(curr.imgPath);
    }, []);

    // 모든 이미지 preload 작업을 비동기적으로 수행합니다.
    Promise.all(images.map(imagePath => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = imagePath;
            img.onload = resolve; // 이미지 로드 성공 시 resolve 호출
            img.onerror = reject; // 이미지 로드 실패 시 reject 호출
        });
    }))
};

return(//기존 코드)

}