SuspenseList

SuspenseList

여러 개의 폴백을 관리하기 위한 컴포넌트

• UI에 여러 Suspense 컴포넌트가 있을 때, 이들의 폴백을 언제, 어떻게 보여줄지 좀 더 제어할 수 있으면 유용

• 화면에 스피너와 컴포넌트가 여기저기 나타나는 서커스는 원하지 않는다!!

• 따라서 폴백과 컴포넌트 표시 시점을 제어할 존재가 필요하다. 그게 바로 SuspenseList

• 두 컴포넌트를 동시에 보여주거나, 항상 특정 컴포넌트가 ㅁ너저 표시되도록 보장한다면 사용자 경험이 향상될 수 있다.

• 또한 어떤 컴포넌트가 자신보다 더 위에 있는 컴포넌트가 더 느리게 렌더링됨으로 인해 아래로 밀려나는 현상을 피하기 위해 적재 순서와 관계없이 컴포넌트들이 맨 위에서부터 차례로 렌더링되도록 지정할 수 있다.

  • 즉, SuspenseList를 사용하면 표시 순서를 강제로 지정해 특정 컴포넌트를 먼저 표시되게 할 수 있다.

<SuspenseList // SuspenseList 안에서 Suspense 컴포넌트를 감쌈
  revealOrder="forwards" // Suspense 하위 컴포넌트들이 로드될 때 어떤 순서로 렌더링될지 제어
>
  <Suspense fallback={<p>Loading user bookings...</p>}>
    <UserBookings id={userID} />
  </Suspense>  
  
  <Suspense fallback={<p>Loading user todos...</p>}>
    <UserTodos id={userID} />
  </Suspense>
</SuspenseList>

• revealOrder="forwards"

  • 선언된 순서대로

• revealOrder="backwords"

  • 선언된 반대 순서대로

• revealOrder="together"

  • 동시에 표시

• tail="collapsed"

  • 한번에 하나의 폴백만 표시

  • ex: 먼저 예약의 폴백이 표시되고, 그 다음에 할 일의 폴백이 표시됨

// tail 프룹을 사용하면 한 번에 하나의 폴백만 표시된다.
<SuspenseList revealOrder="forwards" tail="collapsed">
  {/* Suspense 컴포넌트가 포함된 UI */}
</SuspenseList>