Suspense

Suspense

<Suspense>를 사용하면 자식이 로딩을 완료할 때까지 fallback을 표시한다.

props

• children
  렌더링하려는 실제 UI이다. 렌더링하는동안 children이 일시중단되면 Suspense 경계가 fallback 렌더링으로 전환된다.

• fallback
  로딩이 완료되지 않은 경우에 실제 UI대신 렌더링할 대체 ui이다. 어떤 리액트 노드이던 괜찮지만 주로, 로딩 스피너나 스켈레톤 같은 가벼온 플레이스 홀더 뷰를 사용한다.
  Suspense는 children이 일시중단되면 자동으로 fallback으로 전환되고, 데이터가 준비되면 다시 children으로 전환된다.
  만약에 렌더링 중에 fallback이 일시중단되면 가장 가까운 상위 Suspense 경계가 활성화된다.

Usage

• 콘텐츠를 로딩하는 동안 fallback 표시하기
  어플리케이션의 어떤 부분이든 Suspense 경계로 감쌀 수 있다.

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

리액트는 자식에게 필요한 모든 코드와 데이터가 로드될 때까지 로딩 폴백을 표시한다.
Suspense는 Effect나 이벤트 핸들러 내부에서 페칭하는 경우를 감지하지 않는다.

• 기본적으로 Suspense 내부의 전체 트리는 단일 단위로 취급된다.

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

여기에서 Suspense내부의 것들은 모두 함께 <Loading/> 로 대체된다.

• Suspense 중첩하기
  컴포넌트가 일시 중단되면 가장 가까운 상위 Suspense 컴포넌트가 fallback을 표시한다. 이를 통해서 여러 Suspense 컴포넌트를 중첩하여 로딩순서를 구현할 수 있다.