React Suspense 적용

React Suspense란?

Suspense는 React 16.6에서 도입된 기능으로, 컴포넌트의 렌더링을 특정 작업이 끝날 때까지 '중단'시키고 그동안 대체 UI를 보여줄 수 있게 해주는 기능입니다. 주로 데이터 로딩이나 코드 스플리팅 상황에서 사용됩니다.

Suspense vs 기존 로딩 처리 방식

기존 로딩 처리 방식의 한계

기존에는 주로 다음과 같은 방식으로 로딩 상태를 처리했습니다

function ParentComponent() {
  const { data, isLoading } = useQuery('data', fetchData);

  return (
    <div>
      <ChildComponent isLoading={isLoading} data={data} />
      <OtherComponent isLoading={isLoading} data={data} />
    </div>
  );
}

function ChildComponent({ isLoading, data }) {
  if (isLoading) {
    return <LoadingSpinner />;
  }
  return <div>{data}</div>;
}

이 방식의 문제점

1. 로딩 상태를 props로 계속 전달해야 함
2. 컴포넌트 간 결합도가 높아짐
3. 세분화된 로딩 상태 관리가 어려움

Suspense의 선언적 접근

Suspense는 이러한 문제를 해결하기 위해 다른 접근 방식을 사용합니다

function ParentComponent() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <ChildComponent />
      <OtherComponent />
    </Suspense>
  );
}

function ChildComponent() {
  const { data } = useQuery('data', fetchData, { suspense: true });
  return <div>{data}</div>;
}

Suspense의 특징

1. 로딩 상태를 상위 컴포넌트에서 선언적으로 처리
2. 개별 컴포넌트는 로딩 상태를 신경 쓸 필요 없음
3. 경계(boundary)를 기준으로 로딩 UI가 표시됨

실제 구현 예시

다음은 주식 정보를 보여주는 홈 페이지의 구현 예시입니다

import { Suspense } from 'react';
import TopFive from 'components/TopFive';
import StockIndex from 'components/StockIndex';
import News from 'components/News';
// ... 스켈레톤 컴포넌트 import

export default function Home() {
  return (
    <>
      <Suspense fallback={<StockIndexSkeleton />}>
        <StockIndex />
      </Suspense>
      <Suspense fallback={<SkeletonList />}>
        <TopFive />
      </Suspense>
      <Suspense fallback={<NewsSkeleton />}>
        <News />
      </Suspense>
    </>
  );
}

Suspense 사용 시 고려사항

1. 컴포넌트 구조 설계

• Suspense는 항상 외부에서 컴포넌트를 감싸는 형태로 사용
• 개별 요소 단위의 로딩 처리가 필요한 경우에는 적합하지 않을 수 있음
• 컴포넌트를 적절한 크기로 분리하여 Suspense 경계 설정 필요

2. 기존 코드 마이그레이션

• props를 통한 isLoading 전달 방식에서 Suspense로의 전환 시 구조 변경 필요
• 점진적인 마이그레이션을 위해 두 방식의 혼용이 필요할 수 있음
• 컴포넌트 리팩토링 시 책임 범위 재정의 필요

React Query와 Suspense 통합하기

React Query에서 Suspense를 사용하려면 다음과 같이 설정할 수 있습니다

const { data } = useQuery({
  queryKey: ['stocks'],
  queryFn: fetchStockData,
  suspense: true  // Suspense 모드 활성화
});

또는 QueryClient 설정에서 전역적으로 설정할 수도 있습니다

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true
    }
  }
});

결론

Suspense는 기존의 prop 기반 로딩 처리 방식과는 조금 다른 느낌이라고 생각합니다. 컴포넌트 단위의 세밀한 로딩 제어는 어려울 수 있지만, 선언적이고 깔끔한 코드 구조를 가능하게 합니다.