zustand store

작은 전역 스토어는 필요한 조각만 구독한다

Zustand는 store 전체를 전역 변수처럼 쓰는 방식이 아니라, 컴포넌트가 selector로 필요한 상태 조각만 읽는 구조다.

Component selector

렌더링에 필요한 상태 조각만 선택해 구독한다.

Store set / get

상태와 action을 한 함수 안에서 만들고 타입을 함께 묶는다.

Middleware persist / devtools

저장, 로깅, 디버깅은 store 경계에서 붙인다.

구성	타입으로 먼저 정할 것	렌더링 영향
State Type	count, user, actions처럼 store가 보유할 데이터와 함수	필드가 작을수록 selector가 좁아진다.
Action	set으로 바꿀 상태와 인수 타입	변경된 조각을 구독한 컴포넌트만 다시 그린다.
Middleware	persist key, devtools 이름, 확장된 store shape	디버깅과 저장은 store 밖 사용처를 흐리지 않는다.

export const useCounterStore =
  create<CounterState>((set) => ({
    count: 0,
    inc: () => set((s) => ({ count: s.count + 1 })),
  }));

핵심: store를 크게 만드는 것보다 selector를 작게 유지하는 것이 불필요한 렌더링을 줄인다.