Zustand에서 상태를 가져오는 방식

Zustand에서 상태를 가져오는 방식에 따라 리렌더링 빈도와 성능이 달라진다.
핵심은 selector가 무엇을 반환하느냐다.

---

1. 개별 선택자 방식 (가장 안전)

const hasStarted = useTabStore(state => state.hasStarted);
const setHasStarted = useTabStore(state => state.setHasStarted);

• 각 값이 독립적으로 구독
• 해당 값이 바뀔 때만 리렌더링
• 성능 이슈 없음

---

2. 구조 분해 할당 방식

❌ shallow 없이 사용 (비권장)

const { hasStarted, setHasStarted } =
  useTabStore(state => ({
    hasStarted: state.hasStarted,
    setHasStarted: state.setHasStarted,
  }));

문제점

• selector가 매번 새 객체를 반환
• Zustand 기본 비교는 참조 비교(Object.is)
• 결과적으로 store의 어떤 값이 바뀌어도 리렌더링

---

✅ shallow 비교 사용 (권장)

import { shallow } from 'zustand/shallow';

const { hasStarted, setHasStarted } =
  useTabStore(
    state => ({
      hasStarted: state.hasStarted,
      setHasStarted: state.setHasStarted,
    }),
    shallow
  );

장점

• 객체 내부를 얕게 비교
• 실제로 사용하는 값이 바뀔 때만 리렌더링
• 가독성과 성능의 균형

---

3. 정리

방식	리렌더링	추천
개별 선택자	정확	✅
구조 분해 + shallow	정확	✅
구조 분해 (shallow 없음)	과도	❌

---

Zustand에서 객체를 반환하는 selector를 쓰면
반드시 shallow를 함께 사용하자

이 방법으로 불필요한 리렌더링을 피할 수 있다!