어떤 이유로 사용하나요?
@suspensive/jotai는 아래와 같은 동기로 사용됩니다.
Jotai의 비동기 atom을 더 쉽고 직관적으로 사용할 수 있습니다.
Jotai의 atom은 비동기 읽기/쓰기를 지원합니다. 비동기 atom은 비동기 흐름을 처리하기 위해 Suspense를 활용하고 있으며, atom이 비동기 동작을 시작하게 되면 부모의 Suspense에게 Promise의 pending 상태를 위임합니다.
@suspensive/jotai의 <Atom/>
의 Props는 Jotai의 useAtom
의 인터페이스와 동일하게 사용할 수 있습니다. <Atom/>
을 사용하면 내부적으로 어떤 atom을 사용하는지, <Suspense/>
와 같은 depth에서 suspense를 발생시키는 것이 무엇인지 직관적으로 보여줄 수 있게 됩니다.
import { Atom } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { UserProfile, UserPosts } from '~/components'
import { userAtom } from '~/atoms'
const MyPage = () => (
<Suspense fallback={'pending...'}>
{/* 어떤 atom을 사용하고 suspense를 발생시키는지 파악할 수 있습니다. */}
<Atom atom={userAtom}>{([data]) => <UserProfile {...data} />}</Atom>
<Atom atom={userAtom}>{([data]) => <UserPosts {...data} />}</Atom>
</Suspense>
)
Jotai의 확장 라이브러리(Extension Library)와 함께 사용할 수 있습니다.
Jotai에는 tRPC, Query, Cache 등 다양한 확장 라이브러리가 있습니다. 확장 라이브러리의 atom도 @suspensive/jotai의 <Atom/>
, <SetAtom/>
, <AtomValue/>
와 모두 호환됩니다.
아래 예시는 Query에서 소개된 확장 라이브러리인 jotai-tanstack-query를 활용한 예시입니다.
import { AtomValue } from '@suspensive/jotai'
import { Suspense, ErrorBoundary } from '@suspensive/react'
import { UserProfile } from '~/components'
import { userQueryAtom } from '~/queries' {/* 'jotai-tanstack-query'의 atomWithSuspenseQuery를 사용했습니다. */}
const MyPage = () => (
<ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
<Suspense fallback={'pending...'}>
<AtomValue atom={userQueryAtom}> {/* 확장 라이브러리의 atom도 호환됩니다. */}
{({ data: user }) => <UserProfile key={user.id} {...user} />}
</AtomValue>
</Suspense>
</ErrorBoundary>
)