상태 관리 라이브러리 valtio

valtio는 React 애플리케이션에서 간결하고 직관적인 상태 관리를 가능하게 해주는 프록시 기반 상태 라이브러리입니다.

---

주요 특징

프록시 기반	JavaScript Proxy를 활용해 상태를 감지하고 자동으로 렌더링
불변성 처리 필요 없음	setState 없이 직접 값을 변경하면 자동으로 UI가 반응
간단한 문법	useSnapshot() 훅으로 상태를 구독
타입스크립트 친화적	타입 추론과 추적이 우수
Recoil, Zustand보다 더 선언적	코드가 짧고 명확함

---

기본 사용법

import { proxy, useSnapshot } from 'valtio';

// 전역 상태 정의
const state = proxy({
  count: 0,
});

// 컴포넌트에서 사용
function Counter() {
  const snap = useSnapshot(state);
  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={() => state.count++}>+1</button>
    </div>
  );
}

---

주요 기능 (핵심 기능)

1. proxy()

• 상태를 Proxy 객체로 감싸 자동 추적

const state = proxy({ darkMode: false });

2. useSnapshot()

• 상태를 읽기 전용으로 구독하여 리렌더링 유도

const snap = useSnapshot(state);

3. computed()

• 자동 캐싱되는 파생값 정의

import { computed } from 'valtio/utils';

const state = proxy({
  count: 2,
  doubled: computed((get) => get(state).count * 2),
});

4. subscribe()

• 상태 변경을 수동으로 감지

import { subscribe } from 'valtio';

subscribe(state, () => {
  console.log('State changed:', state.count);
});

5. devtools

• Chrome Devtools 연동 가능