🔗 https://www.daleseo.com/react-suspense/
위의 블로그 글을 참고하여 정리한 내용입니다.
자세한 예시 코드는 위의 링크를 통해 보실 수 있습니다.

Suspense란?

컴포넌트의 랜더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 랜더링할 수 있다. 이 작업은 꼭 어떠한 작업이 되어야한다는 특별한 제약 사항은 없지만 비동기(asynchronously)로 데이터를 가져오는 작업에 많이 사용된다.
일반적으로 데이터 로딩(data loading)을 전문으로 하는 라이브러리나 프레임워크에서 제공하는 데이터 로더(data loader)에 의존하는 경우가 많았다.
Suspense는 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알려주는 새로운 메커니즘이다.

기본 문법

리액트는 JSX 코드 안에 들어있는 컴포넌트를 즉시 호출하여 바로 랜더링을 진행한다.
예를 들어, <UserList /> 컴포넌트가 포함된 JSX 코드를 랜더링할 때, UserList함수를 바로 호출할 것이다.

<UserList />

하지만 컴포넌트를 아래와 같이 Suspense로 감싸주면 컴포넌트의 랜더링을 특정 작업 이후로 미루고, 그 작업이 끝날 때 까지는 fallback 속성으로 넘긴 컴포넌트를 대신 보여줄 수 있다.

<Suspense fallback={<Spinner />}>
	<UserList />
</Suspense>

즉, <UserList /> 컴포넌트의 데이터가 렌더링 되는 동안에는 fallback 속성에 명시된 <Suspense/>컴포넌트가 화면에 보여지다가<UserList />의 렌더링이 끝나면 <UserList />가 화면에 보여진다.