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