search

SuspenseList

hashtag
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: 먼저 예약의 폴백이 표시되고, 그 다음에 할 일의 폴백이 표시됨

PrevioususeTransition, uesDeferredValueNextAI

Last updated