Zustand Selector 분석

const { user, theme } = useUserStore((s) => s);
// → 스토어 전체 구독. 가장 단순하지만 모든 변경에 리렌더.

const { user, theme } = useUserStore((s) => ({
  user: s.user,
  theme: s.theme,
}));
// → 특정 값만 선택하지만, 새 객체 매번 생성 → 항상 리렌더.
// 보기엔 좋아도 성능상으로는 안좋음

const cartItemsMap = useOrderStore((s) => s.cartItemsMap);
const removeFromCart = useOrderStore((s) => s.removeFromCart);
const updateCartItemQuantity = useOrderStore((s) => s.updateCartItemQuantity);
// → 각 필드 독립 구독. 필드 바뀔 때만 리렌더.

const { user, theme } = useUserStore(useShallow(
  (s) => ({
   user: s.user, 
   theme: s.theme
    })));
// 객체 리턴이지만 얕은 비교로 리렌더 최소화.

const stringLeft = 'John Doe'
const stringRight = 'John Doe'

Object.is(stringLeft, stringRight) // -> true
shallow(stringLeft, stringRight) // -> true

const numberLeft = 10
const numberRight = 10

Object.is(numberLeft, numberRight) // -> true
shallow(numberLeft, numberRight) // -> true

const booleanLeft = true
const booleanRight = true

Object.is(booleanLeft, booleanRight) // -> true
shallow(booleanLeft, booleanRight) // -> true

const bigIntLeft = 1n
const bigIntRight = 1n

Object.is(bigIntLeft, bigIntRight) // -> true
shallow(bigIntLeft, bigIntRight) // -> true

// -------------객체 비교--------------
const objectLeft = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
}
const objectRight = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
}

Object.is(objectLeft, objectRight) // -> false
shallow(objectLeft, objectRight) // -> true


// -------------Set 비교--------------
const setLeft = new Set([1, 2, 3])
const setRight = new Set([1, 2, 3])

Object.is(setLeft, setRight) // -> false
shallow(setLeft, setRight) // -> true


// -------------Maps 비교--------------
const mapLeft = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])
const mapRight = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])

Object.is(mapLeft, mapRight) // -> false
shallow(mapLeft, mapRight) // -> true

const objectLeft = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  address: {
    street: 'Kulas Light',
    suite: 'Apt. 556',
    city: 'Gwenborough',
    zipcode: '92998-3874',
    geo: {
      lat: '-37.3159',
      lng: '81.1496',
    },
  },
}
const objectRight = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  address: {
    street: 'Kulas Light',
    suite: 'Apt. 556',
    city: 'Gwenborough',
    zipcode: '92998-3874',
    geo: {
      lat: '-37.3159',
      lng: '81.1496',
    },
  },
}

Object.is(objectLeft, objectRight) // -> false
shallow(objectLeft, objectRight) // -> false