Jotai의 상태는 React 내부에 존재하지만, 때로는 React 외부의 세계와 상호작용하는 것이 유용할 수 있습니다.

createStore

createStore는 여러분의 아톰을 저장할 수 있는 스토어 인터페이스를 제공합니다. 이 스토어를 사용하면 React 외부에서 저장된 아톰의 상태에 접근하고 변경할 수 있습니다.

import { atom, useAtomValue, createStore, Provider } from 'jotai'

const timeAtom = atom(0)
const store = createStore()

store.set(timeAtom, (prev) => prev + 1) // 아톰의 값을 업데이트
store.get(timeAtom) // 아톰의 값을 읽기

function Component() {
  const time = useAtomValue(timeAtom) // React 내부에서
  return (
    <div className="App">
      <h1>{time}</h1>
    </div>
  )
}

export default function App() {
  return (
    <Provider store={store}>
      <Component />
    </Provider>
  )
}

예제