<aside> 💡 Suspense를 사용하면 컴포넌트가 렌더링하기 전에 다른 작업이 먼저 이루어지도록 “대기합니다”.

</aside>

컴포넌트 자체를 비동기적으로 불러오기

• lazy + Supense 조합
• 컴포넌트 사이즈가 너무 커서, 컴포넌트 자체를 비동기적으로 불러오기로 했다.
• 예시 코드

import { Suspense, lazy } from 'react';
// 사이즈가 엄청 큰 컴포넌트를 비동기로 불러오기로했다.
const HugeComponent = lazy(() => import('./HugeComponent'));

const ComponentWithSuspense = () => {
  return (
    <Suspense fallback={<Spinner />}>
      <HugeComponent />
    </Suspense>
  );
};

export default ComponentWithSuspense;

• 특정 컴포넌트를 비동기적으로 불러와서 화면에 보여주는데, 비동기 로딩이 진행 중인 상태에는 그에 맞추어 스피너를 화면에 노출하는 이 상황, 화면을 어떻게(HOW) 그릴지에 집중하는 것이 아니라 무엇을(WHAT) 보여줄 것인지에 집중하였다고 보이기에 충분하지 않나요?

<aside> 💡 (Reprise) 선언형 컴포넌트를 사용한 컴포넌트는 「무엇을(WHAT) 보여줄 것이냐」에 집중합니다.

</aside>

위 예시의 Suspense와 Lazy를 사용한 “동적으로 컴포넌트 불러오기”는 Router와 함께 Code Splitting에 주로 사용됩니다.

데이터 불러오기를 위한 Suspense

• 이 부분 역시 Suspense를 사용해서 비동기 데이터도 선언적으로 처리할 수 있을까요? 만약 가능하다면 API 호출 상태에 따라서 화면을 어떻게(HOW) 그릴지 고민하지 않고 「API 로딩 중인 경우」와 「비동기 데이터가 불러와진 경우」에 따라 무엇을(WHAT) 사용자에게 보여줄지를 바탕으로 컴포넌트를 구성

import { Suspense } from 'react';

const User = () => {
  return (
    // UserProfile에서 비동기 데이터를 로딩하고 있는 경우
    // Suspense의 fallback을 통해 Spinner를 보여줍니다.
    <Suspense fallback={<Spinner />}>
      <UserProfile />
    </Suspense>
  );
};

const UserProfile = () => {
  // userProfileRepository는 Suspense를 지원하는 "특별한 객체"
  const { data } = userProfileRepository();

  return (
    // 마치 데이터가 "이미 존재하는 것처럼" 사용합니다.
    <span>
      {data.name} / {data.birthDay}
    </span>
  );
};

export default User;

• userProfile 컴포넌트는 Suspense를 지원하는 userProfileRepository 객체를 통해 데이터를 비동기적으로 불러오고 있다.
• 그런데, useProfileRepository 컴포넌트는 일반적으로 Promise를 return 하는 우리가 일반적으로 사용하는 fetch 함수가 아니다.

<aside> 💡 Suspense를 지원하는 특별한 객체를 사용하면 비동기 데이터 불러오기도 Suspense를 통해 처리할 수 있다가 핵심입니다.

</aside>

• 비동기 데이터 불러오기를 Suspense를 통해 처리할 경우, 상태에 따라서 어떤(WHAT) 화면을 보여줄지에 집중할 수 있음.
• 데이터가 불러 온후의 화면은 온전히 <UserProfile/> 컴포넌트가 담당한다.