Zustand vs Context API: 올바른 선택과 사용법

const initialFirstTeamMembers = {
  barca: ['messi', 'suarez', 'neymar'],
  madrid: ['ronaldo', 'bale', 'benzema'],
};

const reducer = (
  state: typeof initialFirstTeamMembers,
  action: Action
): State => {
  switch (action.type) {
    case 'add':
      return {
        ...state,
        [action.team]: [...state[action.team], action.player],
      };
    case 'remove':
      return {
        ...state,
        [action.team]: state[action.team].filter(
          player => player !== action.player
        ),
      };
    default:
      return state;
  }
};

const FirstTeamMembersContext = createContext(undefined);
 
const useFirstTeamMembers = () => {
  const context = useContext(FirstTeamMembersContext);
 
  if (context === undefined) {
    throw new Error(
      'useFirstTeamMembers must be used within a FirstTeamMembersProvider'
    );
  }
 
  return context;
};
 
const FirstTeamMembersProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <FirstTeamMembersContext.Provider value={value}> {}
      <Barca />
      <Madrid />
    </FirstTeamMembersContext.Provider>
  );
};

export const Barca = () => {
  const [state, dispatch] = useFirstTeamMembers();
 
  return (
    <>
      <h3>Barcelona</h3>
      <ul>
        {state.barca.map(player => (
          <li key={player}>
            {player}
            <button
              onClick={() =>
                dispatch({ type: 'remove', team: 'barca', player })
              }
            >
              Remove
            </button>
          </li>
        ))}
      </ul>
    </>
  );
};

const initialBarcaState: { barca: Members } = {
  barca: ['messi', 'suarez', 'neymar'],
};
 
const initialMadridState: { madrid: Members } = {
  madrid: ['ronaldo', 'bale', 'modric'],
};

import { useBarcaTeamMembers } from './TeamProvider';
 
export const Barca = () => {
  const [state, dispatch] = useBarcaTeamMembers();
 
  return (
    <>
      <h3>Barcelona</h3>
      <ul>
        {state.map(player => (
          <li key={player}>
            {player}
            <button onClick={() => dispatch({ type: 'remove', player })}> {}
              Remove
            </button>
          </li>
        ))}
      </ul>
    </>
  );
};

// ❌ 이렇게 사용하면 성능 문제 발생
const GlobalStateContext = createContext({ 
  user: null, 
  theme: 'light', 
  notifications: []
});
 
// ✅ 이렇게 사용하는 게 맞아요
const ThemeContext = createContext('light');
const UserServiceContext = createContext(userService);

// 문제 1: props로 초기화가 어려움
const useCounterStore = create(() => ({
  count: 0, // 이 값을 props로 받으려면?
}));
 
// 문제 2: 테스트 격리가 어려움  
// 각 테스트마다 독립적인 store 인스턴스가 필요한데...
 
// 문제 3: 컴포넌트 재사용성 저하
// 같은 컴포넌트를 여러 번 사용할 때 각각 다른 상태를 가져야 한다면?

// 1. zustand store 팩토리 함수 생성
const createThemeStore = (initialTheme: Theme) => 
  create<ThemeState>()((set) => ({
    theme: initialTheme, // props로 초기화 가능!
    toggleTheme: () => set(state => ({ 
      theme: state.theme === 'dark' ? 'light' : 'dark' 
    })),
  }));
 
// 2. Context로 store 인스턴스 제공
const ThemeStoreContext = createContext<ReturnType<typeof createThemeStore> | null>(null);
 
export const ThemeProvider = ({ children, initialTheme = 'system' }) => {
  const store = useMemo(() => createThemeStore(initialTheme), [initialTheme]);
  
  return (
    <ThemeStoreContext.Provider value={store}>
      {children}
    </ThemeStoreContext.Provider>
  );
};
 
// 3. 커스텀 훅으로 안전하게 접근
export const useThemeStore = () => {
  const store = useContext(ThemeStoreContext);
  if (!store) throw new Error('ThemeProvider가 필요합니다');
  return store;
};

export const useBarcaTeamStore = create<BarcaState>(set => ({
  barca: ['messi', 'suarez', 'neymar'],
  addPlayer: player => set(state => ({ barca: [...state.barca, player] })),
  removePlayer: player =>
    set(state => ({ barca: state.barca.filter(p => p !== player) })),
}));
 
export const useMadridTeamStore = create<MadridState>(set => ({
  madrid: ['ronaldo', 'bale', 'modric'],
  addPlayer: player => set(state => ({ madrid: [...state.madrid, player] })),
  removePlayer: player =>
    set(state => ({ madrid: state.madrid.filter(p => p !== player) })),
}));

export const Barca = () => {
  const { barca, removePlayer } = useBarcaTeamStore();
 
  return (
    <>
      <h3>Barcelona</h3>
      <ul>
        {barca.map(player => (
          <li key={player}>
            {player}
            <button onClick={() => removePlayer(player)}>Remove</button> {}
          </li>
        ))}
      </ul>
    </>
  );
};

// Context API 분할: 50+ 줄의 복잡한 코드
// zustand: 10줄로 해결
const useThemeStore = create<ThemeState>()(
  persist(
    (set, get) => ({
      theme: 'system',
      toggleTheme: () => {
        const { theme, isSystemDark } = get();
        set({ theme: theme === 'system' ? (isSystemDark ? 'light' : 'dark') : 'system' });
      },
    }),
    { name: 'theme' }
  )
);