Suspense를 사용하여 탭 컴포넌트의 로딩 상태를 관리하는 방법은?

07 Nov 2023

suspense

React의 Suspense는 컴포넌트가 비동기적으로 데이터를 불러올 때 로딩 상태를 관리하는 간편한 방법을 제공합니다. 이를 활용하여 탭 컴포넌트의 로딩 상태를 관리할 수 있습니다.

1. Suspense 컴포넌트 사용하기

Suspense 컴포넌트는 지정된 자식 컴포넌트가 비동기적으로 데이터를 불러올 때 로딩 상태를 관리하는 역할을 합니다. 탭 컴포넌트를 감싸는 Suspense 컴포넌트를 사용하여 로딩 상태를 관리할 수 있습니다.

import React, { Suspense } from 'react';

function TabComponent() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      {/* 탭 컴포넌트의 내용 */}
    </Suspense>
  );
}

fallback 속성에는 로딩 중일 때 보여줄 대체 컴포넌트(예: 로딩 스피너)를 지정합니다.

2. 비동기 데이터 불러오기

Suspense 컴포넌트를 사용하기 위해선 비동기적으로 데이터를 불러오는 코드가 필요합니다. 보통 React의 lazy 로딩 기능을 사용하여 컴포넌트를 비동기적으로 불러올 수 있습니다.

import React, { lazy } from 'react';

const TabContent = lazy(() => import('./TabContent'));

function TabComponent() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <TabContent />
    </Suspense>
  );
}

3. 탭 컴포넌트 업데이트하기

Suspense와 함께 TabContent 컴포넌트를 사용하는 경우, TabContent 컴포넌트가 로딩된 후에 탭 컴포넌트를 업데이트해야 할 수도 있습니다. 이를 위해 React의 useEffect 훅을 사용할 수 있습니다.

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

function TabComponent() {
  useEffect(() => {
    // TabContent 컴포넌트 로딩 후에 실행되는 코드
    // 탭 컴포넌트 업데이트 또는 추가 로직 작성
  }, []);

  return (
    <Suspense fallback={<LoadingSpinner />}>
      <TabContent />
    </Suspense>
  );
}

4. 추가적인 로딩 상태 관리

Suspense를 사용하여 탭 컴포넌트의 기본 로딩 상태를 관리할 수 있지만, 필요에 따라 추가적인 로딩 상태를 관리할 수도 있습니다. 예를 들어, 탭 내용이 여러 개의 비동기 데이터를 불러와야 하는 경우, 각 데이터에 대한 로딩 상태를 관리하여 사용자에게 진행 상황을 보여줄 수 있습니다.

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

function TabComponent() {
  const [isLoading1, setIsLoading1] = useState(true);
  const [isLoading2, setIsLoading2] = useState(true);

  return (
    <Suspense fallback={<LoadingSpinner />}>
      {isLoading1 && <LoadingSpinner />}
      <TabContent1 onLoad={() => setIsLoading1(false)} />

      {isLoading2 && <LoadingSpinner />}
      <TabContent2 onLoad={() => setIsLoading2(false)} />
    </Suspense>
  );
}

위의 예시는 TabContent1과 TabContent2 컴포넌트가 각각 비동기 데이터를 불러올 때 로딩 상태를 관리하는 방법을 보여줍니다.

Suspense를 사용하여 탭 컴포넌트의 로딩 상태를 관리하는 방법에 대해 알아보았습니다. Suspense는 모든 비동기적인 요청을 간단하게 관리할 수 있도록 도와주므로, 프로젝트에서 유용하게 활용할 수 있을 것입니다.

References

React Documentation: Suspense