React의 Suspense는 애플리케이션의 로딩 상태를 관리하기 위한 강력한 도구입니다. 이 기능을 사용하면 비동기적으로 데이터를 가져오거나 로딩하는 동안 사용자에게 로딩 화면을 표시할 수 있습니다.

게시물 목록의 로딩 상태를 관리하기 위해 Suspense를 사용하는 방법은 다음과 같습니다:

1. 먼저, Suspense 컴포넌트를 import합니다:

    import React, { Suspense } from 'react';
   

2. 게시물 목록을 불러오는 컴포넌트를 생성합니다. 이 컴포넌트는 React.lazy()를 사용하여 비동기적으로 가져올 수 있도록 합니다. Suspense 컴포넌트로 감싸서 로딩 상태를 관리합니다:

    const PostList = React.lazy(() => import('./PostList'));
   
    function App() {
      return (
        <div>
          <h1>게시물 목록</h1>
          <Suspense fallback={<div>로딩 중...</div>}>
            <PostList />
          </Suspense>
        </div>
      );
    }
   

3. fallback prop을 사용하여 로딩 중에 보여줄 컴포넌트를 지정합니다. 위의 예시에서는 “로딩 중…“이라는 텍스트를 표시하도록 설정하였습니다.

4. 실제로 게시물 목록을 가져오는 컴포넌트에 대한 코드를 작성합니다. 이 컴포넌트는 일반적인 React 컴포넌트와 같이 작성하면 됩니다.

이제 사용자가 페이지에 접속했을 때 게시물 목록이 로딩되는 동안 “로딩 중…” 이라는 텍스트를 화면에 표시할 수 있게 되었습니다. 페이지가 로딩되면 실제로 게시물 목록이 표시됩니다.

이 방법을 사용하면 사용자에게 친숙한 로딩 화면을 보여줄 수 있으며, 비동기적인 데이터 로딩을 관리할 수 있습니다.

참고자료

• [React 공식 문서 - Suspense](https://reactjs.org/docs/react-api.html#reactsuspense