JotaiJotai

상태
React를 위한 기본적이고 유연한 상태 관리

Scope

React에서 Jotai의 사용을 확장할 수 있는 몇 가지 라이브러리가 있습니다.

jotai-scope

Jotai의 Provider는 Jotai 스토어를 하위 트리 내에서 범위를 지정할 수 있게 해줍니다. 하지만 이 스토어를 하위 트리 내에서 상위 트리에서 사용할 수는 없습니다.

이 문제를 해결하기 위해 useAtom 및 다른 훅에서 store 옵션을 사용할 수 있습니다. 이러한 사용 사례를 더 쉽게 만들기 위해 jotai-scope는 범위가 지정된 Provider와 훅을 제공합니다. store 옵션을 지정하는 대신, 범위가 지정된 Provider는 atoms prop을 받아들이고, 이 atoms의 사용은 하위 트리 내에서 범위가 지정됩니다.

설치

npm install jotai-scope

카운터 예제

import { atom, useAtom } from 'jotai'
import { molecule, useMolecule, createScope, ScopeProvider } from 'bunshi/react'
const InitialCountScope = createScope({ initialCount: 0 })
const countMolecule = molecule((getMol, getScope) => {
const { initialCount } = getScope(InitialCountScope)
return atom(initialCount)
})
const Counter = () => {
const countAtom = useMolecule(countMolecule)
const [count, setCount] = useAtom(countAtom)
return (
<div>
{count} <button onClick={() => setCount((c) => c + 1)}>+1</button>
</div>
)
}
const App = () => (
<div>
<h1>초기값 1</h1>
<ScopeProvider scope={InitialCountScope} value={{ initialCount: 1 }}>
<Counter />
<Counter />
</ScopeProvider>
<h1>초기값 2</h1>
<ScopeProvider scope={InitialCountScope} value={{ initialCount: 2 }}>
<Counter />
<Counter />
</ScopeProvider>
<h1>기본값</h1>
<Counter />
<Counter />
</div>
)

createIsolation

Jotai의 Provider와 jotai-scope의 스코프 프로바이더는 여전히 전역 컨텍스트를 사용합니다.

만약 여러분이 Jotai에 의존하는 라이브러리를 개발 중이고, 라이브러리 사용자가 앱에서 별도로 Jotai를 사용할 가능성이 있다면, 동일한 컨텍스트를 공유할 수 있습니다. 이는 예상치 못한 Jotai 스토어를 가리킬 수 있어 문제가 될 수 있습니다.

컨텍스트 충돌을 방지하기 위해, jotai-scope에서 createIsolation이라는 유틸리티 함수를 제공합니다.

레포지토리의 예제를 확인해 보세요: https://github.com/jotaijs/jotai-scope/tree/main/examples/01_isolation

bunshi (이전 jotai-molecules)

Jotai 아톰은 리렌더링을 최적화하는 기본적인 해결책을 제공합니다. 전역적으로 정의된 아톰은 다른 아톰에 의존할 수 있지만, 컴포넌트 트리 내부의 props와 state에는 의존할 수 없습니다. 컴포넌트 트리 내부에 아톰을 정의하는 것도 가능하지만, 그런 경우에는 해당 아톰을 어떤 방식으로든 전달해야 합니다 (예: atoms-in-atom).

bunshi는 이러한 사용 사례를 돕기 위한 서드파티 라이브러리입니다.

자세한 내용은 Motivation을 참고하세요.

npm install bunshi