Zustand selector

selector는 필요한 상태 조각만 컴포넌트에 보낸다

useStore((state) => state.count) 는 스토어 전체가 아니라 컴포넌트가 읽는 값만 비교해 리렌더 범위를 좁힌다.

CounterState

스토어

바뀐 값

count: number

유지되는 액션

increment: () => void

다른 상태

user: User | null

selector

읽는 값만 꺼낸다

count 선택

(s) => s.count

액션 선택

(s) => s.increment

프로필 선택

(s) => s.user?.name

rerender scope

영향받는 화면만 갱신

CounterBadge 갱신

count 값이 바뀌었으므로 새 숫자를 받는다.

Toolbar 유지

increment 함수 참조만 쓰면 count 변경으로 다시 그릴 필요가 적다.

ProfileName 유지

user가 바뀌지 않았으므로 프로필 영역은 그대로 둔다.

타입

상태 계약을 먼저 정의

스토어 타입이 상태와 액션의 이름, 인자, 반환값을 고정한다.

선택

쓰는 값만 읽기

객체 전체를 읽으면 무관한 변경에도 업데이트 후보가 넓어진다.

결과

리렌더 범위 축소

값 비교 단위가 작아지면 화면 변경 지점을 추적하기 쉽다.