Zustand 동작 원리 살펴보기 (with Closure)

// vanilla.ts
const createStoreImpl = (createState) => {
  // --- 클로저의 시작 ---
  let state;
  const listeners = new Set();

  const getState = () => state;

  const setState = (partial, replace) => {
    // partial이 함수일 수도, 객체일 수도 있음
    const nextState = typeof partial === 'function' ? partial(state) : partial;

    // 이전 상태와 다음 상태가 다를 경우에만 업데이트 및 알림
    if (!Object.is(nextState, state)) {
      const previousState = state;
      // 새로운 상태로 교체 (객체는 병합, 그 외는 덮어쓰기)
      state =
        replace ?? (typeof nextState !== 'object' || nextState === null)
          ? nextState
          : Object.assign({}, state, nextState);

      // 모든 구독자(listener)에게 변경된 상태를 알림
      listeners.forEach((listener) => listener(state, previousState));
    }
  };

  const subscribe = (listener) => {
    listeners.add(listener);
    // 구독 취소 함수를 반환
    return () => listeners.delete(listener);
  };

  const destroy = () => listeners.clear();

  // 외부에 노출될 API 객체
  const api = { setState, getState, subscribe, destroy };

  // 초깃값 설정! createState 함수를 실행해 state를 초기화
  state = createState(setState, getState, api);

  return api;
  // --- 클로저의 끝 ---
};

export const createStore = (createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl;

import React from 'react';
import { createStore } from './vanilla.js';

// vanilla store와 React를 연결하는 bridge hook
export function useStore(api, selector) {
  const slice = React.useSyncExternalStore(
    api.subscribe,
    () => selector(api.getState()),
    () => selector(api.getInitialState())
  );
  return slice;
}

const createImpl = (createState) => {
  // 1. vanilla store API 생성 (state와 listeners가 여기서 클로저로 생성됨)
  const api = createStore(createState);

  // 2. 이 store에 바인딩된 전용 훅(hook) 생성
  const useBoundStore = (selector) => useStore(api, selector);

  // 3. 훅 자체에 api 메서드(setState 등)를 첨부
  Object.assign(useBoundStore, api);

  return useBoundStore;
};

export const create = (createState) =>
  createState ? createImpl(createState) : createImpl;

// useSyncExternalStore 내부 (간략화)
useEffect(() => {
  if (checkIfSnapshotChanged(inst)) {
    forceUpdate({inst});
  }
  const handleStoreChange = () => {
    if (checkIfSnapshotChanged(inst)) {
      // 강제 리렌더링
      forceUpdate({inst});
    }
  };
  // 스토어 구독 및 cleanup 함수 반환
  return subscribe(handleStoreChange);
}, [subscribe]);

const useBearStore = create((set, get) => ({
  bears: 0,
  increase: () => set(state => ({ bears: state.bears + 1 })),
}));

function Component() {
  const bears = useBearStore(state => state.bears);

  return <h1>{bears} bears</h1>;
}

// 1. 스토어 훅(hook) 생성
const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

// 2. 컴포넌트에서 스토어 사용
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} bears</h1>;
}

// 3. 상태 업데이트
function Controls() {
  const increase = useBearStore((state) => state.increase);
  return <button onClick={increase}>one up</button>;
}