Jotai의 상태는 React 내부에 존재하지만, 때로는 React 외부와 상호작용할 수 있으면 좋을 때가 있습니다.

Valtio는 프록시 인터페이스를 제공하여 일부 값을 저장하고 Jotai의 아톰과 동기화할 수 있습니다.

이 방법은 Valtio의 기본 API만 사용합니다.

설치

이 기능을 사용하려면 valtio와 jotai-valtio를 설치해야 합니다.

npm install valtio jotai-valtio

atomWithProxy

atomWithProxy는 valtio 프록시를 사용해 새로운 아톰을 생성합니다. 이는 양방향 바인딩이 가능하며, 양쪽에서 값을 변경할 수 있습니다.

import { useAtom } from 'jotai'
import { atomWithProxy } from 'jotai-valtio'
import { proxy } from 'valtio/vanilla'

const proxyState = proxy({ count: 0 })
const stateAtom = atomWithProxy(proxyState)
const Counter = () => {
  const [state, setState] = useAtom(stateAtom)

  return (
    <>
      count: {state.count}
      <button
        onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}
      >
        inc atom
      </button>
      <button
        onClick={() => {
          ++proxyState.count
        }}
      >
        inc proxy
      </button>
    </>
  )
}

파라미터

atomWithProxy(proxyObject, options?)

proxyObject (필수): 아톰을 파생시킬 Valtio 프록시 객체

options.sync (선택사항): 배치 업데이트를 기다리지 않고 아톰을 동기적으로 업데이트합니다. 이는 valtio/useSnapshot과 유사합니다. 이 옵션을 사용하면 더 많은 리렌더링이 발생하지만, 다른 Jotai 아톰과의 동기화가 더 잘 보장됩니다.

atomWithProxy(proxyObject, { sync: true })

예제

mutableAtom

mutableAtom은 값을 자체 인식 가능한 Valtio 프록시로 감싸줍니다. 일반적인 자바스크립트 객체를 다루듯이 값을 변경할 수 있습니다.

카운트 값은 value 프로퍼티 아래에 저장됩니다.

const countProxyAtom = mutableAtom(0)

function IncrementButton() {
  const countProxy = useAtomValue(countProxyAtom)
  return <button onClick={() => ++countProxy.value}>+</button>
}

Parameters_4g5tCfq9rJahAQrocBSNkf

mutableAtom(value, options?)

value (필수): 프록시할 값.

options.proxyFn (선택 사항): proxyFn을 통해 커스텀 프록시 함수를 사용할 수 있음. 기본값은 proxy이며, 커스텀 함수를 지정할 수도 있음.

Examples_DiCryjM7CbMp8gSt6jnojc

프록시 뮤테이션 시 주의사항

atom의 read 함수나 렌더링 중에 프록시를 직접 변경하지 않도록 주의하세요. 그렇게 하면 무한 렌더링 루프가 발생할 수 있습니다.

const countProxyAtom = mutableAtom(0)

atom(
  (get) => {
    const countProxy = get(countProxyAtom)
    ++countProxy.value // 이렇게 하면 무한 루프가 발생합니다
  },
  (get, set) => {
    const countProxy = get(countProxyAtom)
    ++countProxy.value // 이렇게 하는 것은 괜찮습니다
  },
)