Suspense

Suspense

import { Suspense } from 'react';
...
<Suspense fallback={<div>Loading...</div>}> 
	<Component ... />
</Suspense>

리액트는 하위 컴포넌트의 모든 코드와 모든 데이터가 출력되기 전까지 fallback을 표시한다.

사용될 때

• lazy를 이용한 지연 로딩 컴포넌트 코드
• 데이터 패칭
• Effect나 이벤트 핸들러 내부에서 페칭하는 경우는 감지하지 않음.

중첩 Suspense

<Suspense fallback={<div>Loading...</div>}>
  <List />
  <Suspense fallback={<ListLoading />}>
    <SubList />
  </Suspense>
</Suspense>

처음 List 컴포넌트가 렌더링 완료 후 SubList가 아직 출력이 다 되지 않다면 SubList를 감싼 Suspense의 fallback이 List 컴포넌트 하위에 보여지게 된다.

잘 안보이지만 먼저 로딩이 완료 되고 하위 컴포넌트가 fallback을 표시하는것을 확인 할 수 있다.