먼저, Suspense 컴포넌트를 감싸고자 하는 이미지 갤러리 컴포넌트를 생성합니다. 그리고 fallback prop을 사용하여 로딩 중에 보여줄 UI를 지정할 수 있습니다. 이 예시에서는 로딩 중에 로딩 스피너를 보여주도록 설정하겠습니다.

import React, { Suspense } from 'react';

const ImageGallery = () => {
  return (
    <Suspense fallback={<Spinner />}>
      // 이미지 갤러리 컴포넌트 내용
    </Suspense>
  );
};

다음으로, 확대/축소 기능을 가진 이미지 컴포넌트를 생성합니다. 이 컴포넌트에서도 Suspense 컴포넌트로 감싸고자 하는 부분을 지정할 수 있습니다. 이 예시에서는 이미지 로딩 시간을 시뮬레이션하기 위해 setTimeout 함수를 사용하여 1초 후에 이미지를 렌더링하도록 설정하겠습니다.

import React, { Suspense } from 'react';

const Image = ({ src }) => {
  return (
    <Suspense fallback={<Spinner />}>
      {setTimeout(() => {
        return <img src={src} alt="Image" />;
      }, 1000)}
    </Suspense>
  );
};

이제 이미지 갤러리 컴포넌트와 이미지 컴포넌트를 함께 사용하여 이미지 갤러리의 확대/축소 기능을 지연시킬 수 있습니다. 이 방법을 사용하면 이미지가 로딩되는 동안 사용자에게 로딩 상태를 시각적으로 표시할 수 있습니다.