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๋ฅผ ๋ฐ์ํ ์ง ์์ํ๊ธฐ ์ด๋ ต์ต๋๋ค.