๐ŸŽ‰ Suspensive v2๊ฐ€ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ๋”๋ณด๊ธฐ โ†’
๋ฌธ์„œ๋ณด๊ธฐ
@suspensive/react-await
<Await/>

Await

โš ๏ธ

<Await/>๋Š” ์‹คํ—˜ ๊ธฐ๋Šฅ์ด๋ฏ€๋กœ ์ด ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ›์€ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๊ฐ€ ๋ฆฌํ„ดํ•œ Promise๊ฐ€ pending์ด๋ฉด ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๋ถ€๋ชจ Suspense์˜ fallback์„ ๋…ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ดํ›„ Promise๊ฐ€ fulfilled๋˜๋ฉด children ์ปดํฌ๋„ŒํŠธ๋“ค์—์„œ ๋ณด์žฅ๋œ awaited data๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ์ด data๋Š” ๋ฐ›์€ ํ‚ค์— cache๋˜์–ด ์žฌ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ pending์—†์ด ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { Await } from '@suspensive/react-await'
import { Suspense } from '@suspensive/react'
 
const getPost = (postId: number) => fetch(`/post/${postId}`).then<Post>((res) => res.json())
 
const Example = () => (
  <Suspense fallback="awaiting...">
    <Await options={{ key: ['post', 2] as const, fn: ({ key: [, postId] }) => getPost(postId) }}>
      {(awaited) => <>{awiated.data}</>} // Post
    </Await>
  </Suspense>
)