[최적화] hover시 React-Query 이용한 Image PreLoad Caching

preLoadImage.ts

export default function preloadImage(src: string): Promise<Event> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = resolve
    img.onerror = reject
    img.src = src
  })
}

useImagePreLoadQuery.ts

async function usePreImages(queryClient: any, key: string | string[], imageArr: string[]) {
  try {
    await Promise.all(imageArr.map((image) => preloadImage(image)))
    queryClient.setQueryData(key, true)
  } catch (error) {
    console.log(error)
  }
}

export default {usePreImages}

onMouseEvent Method

const queryClient = useQueryClient()

const onMouseEnter = useCallback(async () => {
  const key = ['preImage', 'example1']
  const data = queryClient.getQueryData(key)
  if (data) return

  const images = ['/example', '/example2'] // preLoad할 이미지들의 path 입력
  useImagePreLoadQuery.usePreImages(queryClient, key, images)
}, [])

onMouseEnter 사용시 onMouseEnter 함수 불러내기

<button onMouseEnter={onMouseEnter} />

📌 Page PreLoad(블로그)

import loadable from '@loadable/component'
const OtherComponent = loadable(() =>
  import(/* webpackPrefetch: true */ './OtherComponent'),
)

🚫 잘못된 예시
이렇게 했을때 문제 => 이미지를 캐싱을 안했으므로 hover할때마다 함수가 실행된다.
react query local image 사용

const onMouseEnter = useCallback(async () => {
  try {
    await Promise.all([
      preloadImage('/example'),
      preloadImage('/example2')
    ])
  } catch (error) {
    console.error('이미지 로딩 중 오류가 발생했습니다.', error)
  }
}, [])

🚫 문제 useQuery로 사용시 data가 로컬 데이터다 보니까 query에 data가 caching되지 않는 문제 발생

queryClient.setQueryData를 이용해서 데이터 기입