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>

Last updated