Zustand 쓸 때 setter 바로 찍으면 왜 값이 안 바뀌는 걸까?

Zustand를 쓰다 보면 이런 경험, 한 번쯤 해보셨을 거예요 👇

const count = useStore((s) => s.count);
const inc = useStore((s) => s.inc);

const handleClick = () => {
  inc();
  console.log(count); // ??? 여전히 이전 값
};

setter(set)로 값을 바꿨는데 콘솔에 찍으면 갱신이 안 되어있다?
Zustand 버그일까요?
아니요 --- 이건 React 구조상 당연한 동작이에요.

---

🧩 React와 Zustand의 타이밍 차이

React는 "렌더링 단위"로 상태를 관리합니다.
컴포넌트는 렌더 시점의 상태 스냅샷을 들고 있고,
그 이후 값이 바뀌어도 "다음 렌더" 때까지는 이전 상태를 유지해요.

Zustand는 상태를 즉시 바꾸지만,
React가 그걸 반영하려면 다시 렌더링이 예약되어야 합니다.

즉,
> Zustand store는 바로 바뀌지만
> React 훅(useStore)은 다음 렌더 때 최신값을 받는다.

---

⚙️ 예시로 보면

const useCounter = create((set, get) => ({
  count: 0,
  inc: () => set({ count: get().count + 1 }),
}));

function Counter() {
  const count = useCounter((s) => s.count);
  const inc = useCounter((s) => s.inc);

  const handleClick = () => {
    inc();
    console.log("렌더링된 count:", count); // 이전 값
    console.log("store 내부 count:", useCounter.getState().count); // 최신 값
  };
}

• count: 렌더 시점 값\
• useCounter.getState().count: store의 현재 값

---

✅ 최신값을 보는 세 가지 방법

---

상황 방법 설명

---

즉시 최신값 확인 useStore.getState() store를 직접 읽음

렌더 후 최신값 확인 useEffect(() => {}, [state]) React 렌더 완료 후 실행

상태 변화 구독 useStore.subscribe() store의 모든 변화 감지

// 예시: 변화 구독하기
useEffect(() => {
  const unsub = useStore.subscribe((state) => {
    console.log("변화 감지:", state.count);
  });
  return unsub;
}, []);

---

⚛️ React vs Vue 비교

같은 로직을 Vue로 작성하면 왜 즉시 반영될까요?

<script setup>
import { ref } from 'vue'
const count = ref(0)
function handleClick() {
  count.value++
  console.log(count.value) // 최신값!
}
</script>

Vue는 ref나 reactive가 Proxy 기반이라,
setter가 실행되면 즉시 내부 값이 바뀌고
getter는 언제 읽어도 항상 최신 상태를 반환합니다.

항목 React + Zustand Vue + ref

---

상태 관리 렌더링 스냅샷 Proxy 기반 반응형
값 갱신 시점 다음 렌더에서 반영 즉시 반영
console.log 결과 이전 값 최신 값

React는 "렌더 단위"로, Vue는 "데이터 단위"로 반응한다.

---

🚫 useEffect 무한루프 주의

useEffect로 상태 변화를 감지할 때는
의존성 배열 안에서 상태를 다시 set하면 무한루프가 생깁니다.

useEffect(() => {
  useStore.setState({ count: count + 1 }); // ❌ 무한루프
}, [count]);

이건 "count 바뀜 → set → 다시 count 바뀜"의 무한 순환이기 때문이에요.
이럴 땐 subscribe 방식으로 감지하는 게 안전합니다.

---

🧠 정리

• Zustand set()은 즉시 store 상태를 변경하지만
  React 컴포넌트는 다음 렌더에서만 최신값을 받는다.
• 즉시 값을 보고 싶다면 → useStore.getState()
• 렌더 후 최신값을 보고 싶다면 → useEffect
• Vue는 Proxy 기반이라 setter 후 바로 최신값 반영
• useEffect에서 상태를 다시 set하면 무한루프 주의!

---

⚡️ 한 문장 요약:
Zustand는 "store는 즉시, React는 다음 렌더에" 반영된다.