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