React 18에서 정식으로 도입된 Suspense는 비동기 UI 렌더링을 효율적으로 관리할 수 있게 도와줍니다. 이 기능은 개발자들에게 더 선언적이고 직관적인 방식으로 비동기 컨텐츠를 다룰 수 있는 도구를 제공하는데요.

Suspense의 기본 구조

Suspense는 children과 fallback 의 두 가지 주요 props를 받는 React 컴포넌트입니다:

• children: 최종적으로 렌더링될 실제 UI

• fallback: 자식 요소가 로드되기 전까지 표시될 대체 UI (예: 로딩 스피너, 스켈레톤 UI)

기본 사용 예시:

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

선언적 비동기 처리

이전에는 비동기 데이터에 대한 로딩 처리를 할때, 명령형 코드(예: if(loading) return <Loading />)를 사용해야 했습니다만, Suspense를 통해 이러한 로직을 더욱 선언적으로 작성할 수 있게 되었습니다.

Suspense의 내부 동작

Suspense는 Promise를 throw하는 독특한 메커니즘을 사용합니다. 렌더링 중 데이터 로딩이 필요한 경우, 컴포넌트는 Promise를 throw하여 제어권을 상위로 넘깁니다. 이 Promise가 resolve되면 React 스케줄러에 의해 재처리됩니다.

통합된 렌더링 단위

Suspense로 감싼 전체 트리는 하나의 렌더링 단위로 취급됩니다. 이를 통해 여러 비동기 컴포넌트를 동시에 로드하고 표시할 수 있습니다:

<Suspense fallback={<Loading />}>
  <Biography />
  <Panel>
    <Albums />
  </Panel>
</Suspense>

Suspense의 이점

1. 표준화된 비동기 데이터 처리: 다양한 비동기 라이브러리에 대한 의존성 감소

2. SSR 지원: SPA를 넘어 서버 사이드 렌더링까지 확장 가능

3. 향상된 사용자 경험(UX): 세밀한 로딩 상태 제어와 Error Boundary를 통한 효과적인 에러 처리

4. 개선된 개발자 경험(DX): 직관적이고 간결한 코드 작성 가능

Suspense는 React 애플리케이션의 비동기 로직을 간소화하고, 성능을 최적화하며, 사용자 경험을 개선해주는 도구로, 복잡한 비동기 시나리오를 효과적으로 다룰 수 있는 솔루션을 제공합니다. React18부터 정식 도입된 만큼 이제 실무에서도 Suspense를 활용해보시는것을 추천드립니다.

https://ko.react.dev/reference/react/Suspense