Life's

Zustand에서 shallow 비교는 언제 필요할까? selector와 함께 이해하기

이전 글에서 Zustand selector는 언제 쓰는 것이 좋은지 정리했다.그다음 단계에서 자주 같이 등장하는 키워드가 바로 shallow다.selector를 찾아보다 보면 아래 같은 코드도 자주 보게 된다.import { shallow } from "zustand/shallow";const { bears, honey } = useBearStore( (state) => ({ bears: state.bears, honey: state.honey, }), shallow);처음 보면 "selector를 쓸 때는 shallow도 같이 써야 하나?"라는 생각이 들 수 있다.하지만 실제로는 그렇지 않다.shallow는 항상 필요한 옵션이 아니라, 여러 값을 묶어서 선택할 때 생기는 비교 문제를 완..

Zustand Selector는 언제 써야 할까? 성능과 가독성 사이에서 판단하는 기준

Zustand를 사용하다 보면 자연스럽게 selector를 접하게 된다.공식 예제나 여러 글에서 아래와 같은 코드를 자주 볼 수 있다.const bears = useBearStore((state) => state.bears);처음 보면 단순히 "원하는 값만 꺼내오는 문법" 정도로 느껴질 수 있다.하지만 실제로는 렌더링 범위를 줄이고, 컴포넌트의 관심사를 분리하고, 상태 구독 범위를 명확하게 만든다는 점에서 꽤 중요한 역할을 한다.다만 여기서 한 가지 고민이 생긴다.selector는 항상 써야 할까?아니면 필요할 때만 선택적으로 써야 할까?이번 글에서는 Zustand selector를 "무조건 써야 하는 패턴"으로 보기보다, 언제 도입하면 좋고 언제는 굳이 복잡도를 늘릴 필요가 없는지에 집중해서 정리해보려..