Getting Started — Valtio, makes proxy-state simple for React and Vanilla

• 배경, 문제, 존재 이유

• 핵심 개념: proxy, useSnapshot

• 핵심 원리

  • 객체 → Proxy → 상태 업데이트 → 렌더링

  • proxy The proxy tracks changes to the original object and all nested objects, notifying listeners when an object is modified.

    import { proxy } from 'valtio'
    
    const state = proxy({ count: 0, text: 'hello' })
    
    state.count = 1
    state.text = 'world'
    

  • **useSnapshot** that catches changes. Snapshots are read-only to render the JSX from their consistent view of the data.

    function Counter() {
      const snap = useSnapshot(state)
    

• 동기 비동기 미들웨어

• 리액트 18? Next.js?

• 개발자도구는? = 관리의 용이성 = 디버깅