기본 소개

Proxy 기반 React 상태관리 도구

• JS Proxy 기반으로 상태의 수정/읽기를 추적하여 렌더링을 최적화 해주는 상태관리 도구

제공 API

proxy

• 내부 프로퍼티의 수정을 추적하는 상태를 생성

import { proxy } from 'valtio'

const state1 = proxy({ count: 0, text: 'hello' })
const state2 = proxy(new User('Timo', 'Kivinen'))

snapshot

• proxy로 생성된 상태를 인자로 받아, 불변성을 지키면서 변화 부분만 최적화 하여 생성
• snapshot creation optimized

const state = proxy({ a: { aa: 1 }, b: { bb: 2 } })
const snap1 = snapshot(state)
const newSnap = snapshot(state.a);

console.log(snap1) // ---> { a: { aa: 1 }, b: { bb: 2 } }
++state.a.aa
const snap2 = snapshot(state)
console.log(snap2) // ---> { a: { aa: 2 }, b: { bb: 2 } }
snap1.b === snap2.b // this is `true`, it doesn't create a new snapshot because no properties are changed.

useSnapshot

• proxy로 생성된 상태를 인자로 받아, 불변성을 지키면서 변화 부분만 최적화 하여 생성

• 렌더링 최적화 (아래 조건이 만족 시 렌더링)

  1. state의 property 가 수정됨
  2. 수정된 property 가 반환된 snap에서 읽힘

  아래 예시에서 버튼 클릭 시 state의 count가 수정되고, snap의 count가 읽히고 있기 때문에 렌더링됨.

function Counter() {
  const snap = useCard();

  return (
    <div>
      {snap.count}
      <button
        onClick={() => {
          // also read from the state proxy in callbacks
          if (state.count < 10) {
            ++state.count
          }
        }
      >
        +1
      </button>
    </div>
  )
}

useProxy

• useSnapshot을 기반으로 컴포넌트 라이프 사이클에 따라, snap/ state를 전환하여 가상 store를 제공

function Counter() {
  const store = useProxy(state);

  return (
    <div>
      {store.count}
      <button
        onClick={() => {
          // also read from the state proxy in callbacks
          if (store.count < 10) {
            ++store.count
          }
        }
      >
        +1
      </button>
    </div>
  )
}

subscribe

• proxy 객체의 수정이 있을 때 마다 callback함수를 호출