๐Ÿ‘€ Suspensive v2์—์„œ์˜ ๋ณ€๊ฒฝ์„ ํ™•์ธํ•˜์„ธ์š”. ๋”๋ณด๊ธฐ โ†’
๋ฌธ์„œ๋ณด๊ธฐ@suspensive/jotai<SetAtom/>

SetAtom

SetAtom ์ปดํฌ๋„ŒํŠธ๋Š” Jotai์˜ useSetAtom ํ›…๊ณผ ๋™์ผํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ Props๋กœ ์ œ๊ณตํ•˜๋ฉฐ ์„ ์–ธ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

props.atom

Jotai์˜ atom์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { SetAtom } from '@suspensive/jotai'
import { atom } from 'jotai'
 
const switchAtom = atom(false)
 
const Example = () => (
  <SetAtom atom={switchAtom}>
    {(setCount) => (
      <>
        <button onClick={() => setCount(true)}>Set True</button>
        <button onClick={() => setCount(false)}>Set False</button>
      </>
    )}
  </SetAtom>
)

Async Atom์ผ ๊ฒฝ์šฐ ํ”„๋กœ๋ฏธ์Šค(Promise)๊ฐ€ ํ•ด๊ฒฐ(resolve) ๋˜๊ธฐ ์ „๊นŒ์ง€, ๋ถ€๋ชจ์˜ Suspense์—๊ฒŒ Promise์˜ pending ์ƒํƒœ๋ฅผ ์œ„์ž„ํ•ฉ๋‹ˆ๋‹ค.

import { SetAtom } from '@suspensive/jotai'
import { atom } from 'jotai'
 
const request = async () => fetch('https://...').then((res) => res.json())
const baseAtom = atom(0)
 
const Example = () => (
  <SetAtom atom={baseAtom}>
    {(setValue) => (
      <>
        {/* ํ”„๋กœ๋ฏธ์Šค(Promise)๊ฐ€ ํ•ด๊ฒฐ๋˜๊ธฐ ์ „๊นŒ์ง€ Suspend๊ฐ€ ๋ฐœ์ƒ๋ฉ๋‹ˆ๋‹ค. */}
        <button onClick={() => setValue(request())}>request</button>
      </>
    )}
  </SetAtom>
)

๋™๊ธฐ

<Atom/>์˜ ๋™๊ธฐ์™€ ๊ฐ™์ด <SetAtom/> ๋˜ํ•œ, ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ช…ํ™•ํ•˜๊ฒŒ ๋“œ๋Ÿฌ๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์œ„์— ์„ ์–ธ๋œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‚ด๋ถ€์ ์œผ๋กœ ์–ด๋–ค Atom์„ ์‚ฌ์šฉํ•˜๊ณ , Suspense๋ฅผ ๋ฐœ์ƒํ• ์ง€ ์˜ˆ์ƒํ•˜๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.