Suspense를 사용하여 드롭다운 메뉴의 로딩 상태를 관리하는 방법은?

07 Nov 2023

suspense

Suspense란?

Suspense는 리액트의 일부이며, 데이터 로딩이나 코드 스플리팅과 같은 지연된 작업을 처리하는 데 사용됩니다. Suspense 컴포넌트는 지연된 작업이 진행 중일 때 로딩 상태를 표시할 수 있으며, 작업이 완료되면 해당 작업의 결과를 렌더링할 수 있습니다.

드롭다운 메뉴의 로딩 상태 관리하기

Suspense 컴포넌트를 설치합니다. 다음과 같이 명령을 실행하여 패키지를 설치합니다.

npm install react@next react-dom@next

드롭다운 메뉴 컴포넌트를 생성합니다. 컴포넌트 내부에서 필요한 데이터를 가져오기 위해 React.lazy와 import 문을 사용합니다.

import React, { Suspense } from 'react';

const DropdownMenu = React.lazy(() => import('./DropdownMenu'));

function App() {
  return (
    <div>
      {/* 드롭다운 메뉴를 렌더링 */}
      <Suspense fallback={<div>Loading...</div>}>
        <DropdownMenu />
      </Suspense>
    </div>
  );
}

export default App;

드롭다운 메뉴 컴포넌트의 코드를 작성합니다. 데이터가 로드되는 동안 로딩 상태를 표시하는 로직을 추가합니다.

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

function DropdownMenu() {
  const [menuItems, setMenuItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 드롭다운 메뉴 데이터를 비동기적으로 가져오는 로직
    fetch('https://api.example.com/dropdown-menu')
      .then(response => response.json())
      .then(data => {
        setMenuItems(data);
        setLoading(false); // 데이터 로딩이 완료되면 로딩 상태를 false로 변경
      });
  }, []);

  return (
    <div>
      {loading ? (
        <div>Loading...</div> // 로딩 상태일 때 로딩 표시
      ) : (
        <ul>
          {menuItems.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DropdownMenu;

Suspense 컴포넌트와 드롭다운 메뉴 컴포넌트를 사용하는 부모 컴포넌트에 Suspense 경계를 추가합니다.

import React, { Suspense } from 'react';
import DropdownMenu from './DropdownMenu';

function ParentComponent() {
  return (
    <div>
      {/* Suspense 경계로 감싼 드롭다운 메뉴 */}
      <Suspense fallback={<div>Loading...</div>}>
        <DropdownMenu />
      </Suspense>
    </div>
  );
}

export default ParentComponent;

이제 드롭다운 메뉴 컴포넌트가 로딩되는 동안 “Loading…“이라는 로딩 표시가 표시될 것입니다. 데이터 로딩이 완료되면 실제 드롭다운 메뉴가 표시됩니다.

실제 프로젝트에서는 fetch 대신 사용자의 요청을 처리하는 API 호출 또는 데이터베이스 쿼리를 실행하는 것이 일반적입니다. 또한 로딩 상태를 더 잘 표시하기 위해 스피너나 스켈레톤 UI와 같은 추가 UI 요소를 사용할 수 있습니다.

이러한 방식으로 Suspense를 사용하여 드롭다운 메뉴의 로딩 상태를 관리할 수 있습니다. Suspense를 사용하면 로딩 상태를 간단하게 처리할 수 있으며, 사용자에게 더 나은 경험을 제공할 수 있습니다.