React의 Suspense는 데이터 불러오기, 코드 스플리팅, 이미지 로딩 등 비동기적인 작업을 처리할 때 사용됩니다. 이를 활용하여 이미지 갤러리의 썸네일 로딩 상태를 관리할 수 있습니다.

1. 이미지 로딩 상태 관리 컴포넌트 생성

이미지 갤러리에서 썸네일 로딩 상태를 관리하기 위해, Suspense를 사용하여 해당 상태를 컨트롤하는 컴포넌트를 생성합니다.

import React, { Suspense, useState } from 'react';

const ThumbnailGallery = () => {
  const [loading, setLoading] = useState(true);

  // 썸네일 로딩이 완료되면 상태를 업데이트하는 콜백 함수
  const handleThumbnailLoad = () => {
    setLoading(false);
  };

  return (
    <Suspense fallback={<Spinner />}>
      {loading && <ThumbnailLoader onLoad={handleThumbnailLoad} />}
      // 썸네일 컴포넌트들
    </Suspense>
  );
};

위 예제에서 ThumbnailGallery는 이미지 갤러리를 렌더링하는 컴포넌트입니다. loading이 true일 때는 로딩 스피너를, false일 때는 썸네일 컴포넌트들을 보여줍니다.

2. 썸네일 로딩 컴포넌트 생성

이미지 갤러리의 각 썸네일 로딩 상태를 관리하기 위해, ThumbnailLoader 컴포넌트를 생성합니다.

import React, { useEffect } from 'react';

const ThumbnailLoader = ({ onLoad }) => {
  useEffect(() => {
    // 썸네일 로딩 로직
    // ...

    // 로딩이 완료되면 onLoad 콜백 호출
    onLoad();
  }, [onLoad]);

  return <div>썸네일 로딩 중...</div>;
};

위 예제에서 ThumbnailLoader는 썸네일 로딩을 처리하는 컴포넌트입니다. useEffect 훅을 사용하여 비동기적인 작업을 수행하고, 로딩이 완료되면 onLoad 콜백을 호출하여 loading 상태를 업데이트합니다.

3. 스피너 컴포넌트 생성

로딩 중에 보여줄 스피너 컴포넌트를 생성합니다.

const Spinner = () => {
  return <div>로딩 중...</div>;
};

위 예제에서 Spinner는 로딩 중에 표시될 스피너 컴포넌트입니다.

요약

위와 같이 Suspense를 사용하여 이미지 갤러리의 썸네일 로딩 상태를 관리할 수 있습니다. ThumbnailGallery 컴포넌트에서 loading 상태를 관리하고, ThumbnailLoader 컴포넌트에서 로딩 작업을 처리하며, Spinner 컴포넌트에서 로딩 중에 표시될 UI를 구현합니다.

이를 통해 사용자에게 로딩 상태를 시각적으로 보여주고, 모든 썸네일이 로딩 완료될 때까지 기다리는 효과적인 이미지 갤러리를 구현할 수 있습니다.

참고 자료

• React 공식 문서 - Suspense