(s) => s.count
selector는 필요한 상태 조각만 컴포넌트에 보낸다
useStore((state) => state.count) 는 스토어 전체가 아니라 컴포넌트가 읽는 값만 비교해 리렌더 범위를 좁힌다.
스토어
바뀐 값
count: number
유지되는 액션
increment: () => void
다른 상태
user: User | null
읽는 값만 꺼낸다
(s) => s.increment
(s) => s.user?.name
영향받는 화면만 갱신
count 값이 바뀌었으므로 새 숫자를 받는다.
increment 함수 참조만 쓰면 count 변경으로 다시 그릴 필요가 적다.
user가 바뀌지 않았으므로 프로필 영역은 그대로 둔다.
상태 계약을 먼저 정의
스토어 타입이 상태와 액션의 이름, 인자, 반환값을 고정한다.
쓰는 값만 읽기
객체 전체를 읽으면 무관한 변경에도 업데이트 후보가 넓어진다.
리렌더 범위 축소
값 비교 단위가 작아지면 화면 변경 지점을 추적하기 쉽다.