React 상태 관리 패턴 비교: Zustand vs Jotai vs Redux Toolkit 실무 선택 가이드

// 프로젝트 복잡도에 따른 선택 기준

// 🟢 소규모 프로젝트 (컴포넌트 < 50개)
// → Zustand 추천
const useSimpleStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}))

// 🟡 중규모 프로젝트 (컴포넌트 50-200개)  
// → Jotai 또는 Zustand 추천
const countAtom = atom(0)
const incrementAtom = atom(null, (get, set) => {
  set(countAtom, get(countAtom) + 1)
})

// 🔴 대규모 프로젝트 (컴포넌트 200개+)
// → Redux Toolkit 추천
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 }
  }
})

import { create } from 'zustand'

// ✅ 간단한 카운터 스토어
const useCounterStore = create((set, get) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
  
  // 비동기 액션도 간단하게
  fetchAndIncrement: async () => {
    const response = await fetch('/api/increment')
    const data = await response.json()
    set((state) => ({ count: state.count + data.value }))
  }
}))

// React 컴포넌트에서 사용
function Counter() {
  const { count, increment, decrement, reset } = useCounterStore()
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

// 실무에서 자주 사용하는 사용자 인증 스토어
const useAuthStore = create((set, get) => ({
  user: null,
  isLoading: false,
  error: null,

  // 로그인
  login: async (credentials) => {
    set({ isLoading: true, error: null })
    
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      })
      
      if (!response.ok) {
        throw new Error('로그인에 실패했습니다.')
      }
      
      const user = await response.json()
      set({ user, isLoading: false })
    } catch (error) {
      set({ error: error.message, isLoading: false })
    }
  },

  // 로그아웃
  logout: () => set({ user: null, error: null }),

  // 유저 정보 업데이트
  updateProfile: async (profileData) => {
    const currentUser = get().user
    if (!currentUser) return

    try {
      const response = await fetch(`/api/users/${currentUser.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(profileData)
      })
      
      const updatedUser = await response.json()
      set({ user: updatedUser })
    } catch (error) {
      set({ error: error.message })
    }
  }
}))

// 컴포넌트별 선택적 구독으로 성능 최적화
function LoginForm() {
  const login = useAuthStore(state => state.login)
  const isLoading = useAuthStore(state => state.isLoading)
  const error = useAuthStore(state => state.error)
  
  // user 상태 변화는 이 컴포넌트에 영향주지 않음
}

function UserProfile() {
  const user = useAuthStore(state => state.user)
  const updateProfile = useAuthStore(state => state.updateProfile)
  
  // isLoading, error 상태 변화는 이 컴포넌트에 영향주지 않음
}

import { subscribeWithSelector } from 'zustand/middleware'
import { persist, createJSONStorage } from 'zustand/middleware'

// 지속성과 선택적 구독이 결합된 스토어
const useSettingsStore = create(
  subscribeWithSelector(
    persist(
      (set, get) => ({
        theme: 'light',
        language: 'ko',
        notifications: true,
        
        setTheme: (theme) => set({ theme }),
        setLanguage: (language) => set({ language }),
        toggleNotifications: () => set(state => ({ 
          notifications: !state.notifications 
        })),
      }),
      {
        name: 'user-settings',
        storage: createJSONStorage(() => localStorage),
        // 특정 필드만 저장
        partialize: (state) => ({
          theme: state.theme,
          language: state.language
        })
      }
    )
  )
)

// 특정 상태 변화만 구독하는 컴포넌트
function ThemeToggle() {
  useSettingsStore.subscribe(
    (state) => state.theme,
    (theme) => {
      console.log('테마 변경됨:', theme)
      document.documentElement.setAttribute('data-theme', theme)
    }
  )
  
  const { theme, setTheme } = useSettingsStore()
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme === 'light' ? '🌙' : '☀️'}
    </button>
  )
}

import { atom, useAtom } from 'jotai'

// ✅ 원시 타입 atom
const countAtom = atom(0)
const nameAtom = atom('홍길동')
const isLoadingAtom = atom(false)

// ✅ 파생된 atom (computed)
const doubledCountAtom = atom((get) => get(countAtom) * 2)

// ✅ 쓰기 가능한 파생 atom
const incrementAtom = atom(
  (get) => get(countAtom), // read
  (get, set, value) => set(countAtom, value + 1) // write
)

// React 컴포넌트에서 사용
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const [doubled] = useAtom(doubledCountAtom)
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

// 실무 예제: 사용자 데이터 페칭
const userIdAtom = atom(1)

const userAtom = atom(async (get, { signal }) => {
  const userId = get(userIdAtom)
  
  const response = await fetch(`/api/users/${userId}`, {
    signal // 요청 취소 지원
  })
  
  if (!response.ok) {
    throw new Error('사용자 정보를 불러올 수 없습니다.')
  }
  
  return response.json()
})

// 사용자 포스트 목록 (의존성이 있는 비동기 atom)
const userPostsAtom = atom(async (get) => {
  const user = await get(userAtom) // userAtom 완료 후 실행
  
  const response = await fetch(`/api/users/${user.id}/posts`)
  return response.json()
})

// Suspense와 함께 사용
function UserProfile() {
  const [user] = useAtom(userAtom)
  const [posts] = useAtom(userPostsAtom)
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <h3>게시글 ({posts.length}개)</h3>
      {posts.map(post => (
        <div key={post.id}>
          <h4>{post.title}</h4>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

function App() {
  return (
    <Suspense fallback={<div>사용자 정보 로딩 중...</div>}>
      <ErrorBoundary fallback={<div>오류가 발생했습니다.</div>}>
        <UserProfile />
      </ErrorBoundary>
    </Suspense>
  )
}

// 실무 예제: 쇼핑카트 관리
const cartItemsAtom = atom([])

// 개별 상품의 수량 관리를 위한 atomFamily
const itemQuantityAtom = atomFamily((itemId) =>
  atom(
    (get) => {
      const items = get(cartItemsAtom)
      const item = items.find(item => item.id === itemId)
      return item?.quantity || 0
    },
    (get, set, newQuantity) => {
      const items = get(cartItemsAtom)
      const existingItemIndex = items.findIndex(item => item.id === itemId)
      
      if (newQuantity <= 0) {
        // 수량이 0 이하면 아이템 제거
        set(cartItemsAtom, items.filter(item => item.id !== itemId))
      } else if (existingItemIndex >= 0) {
        // 기존 아이템 수량 업데이트
        const updatedItems = [...items]
        updatedItems[existingItemIndex] = {
          ...updatedItems[existingItemIndex],
          quantity: newQuantity
        }
        set(cartItemsAtom, updatedItems)
      } else {
        // 새 아이템 추가
        set(cartItemsAtom, [...items, { id: itemId, quantity: newQuantity }])
      }
    }
  )
)

// 총 가격 계산 (파생된 atom)
const totalPriceAtom = atom(async (get) => {
  const items = get(cartItemsAtom)
  
  if (items.length === 0) return 0
  
  // 각 상품의 가격 정보를 병렬로 페칭
  const pricePromises = items.map(async (item) => {
    const response = await fetch(`/api/products/${item.id}/price`)
    const { price } = await response.json()
    return price * item.quantity
  })
  
  const prices = await Promise.all(pricePromises)
  return prices.reduce((sum, price) => sum + price, 0)
})

// 컴포넌트에서 사용
function ShoppingCart() {
  const [items] = useAtom(cartItemsAtom)
  
  return (
    <div>
      <h2>장바구니</h2>
      {items.map(item => (
        <CartItem key={item.id} itemId={item.id} />
      ))}
      <Suspense fallback="총액 계산 중...">
        <TotalPrice />
      </Suspense>
    </div>
  )
}

function CartItem({ itemId }) {
  const [quantity, setQuantity] = useAtom(itemQuantityAtom(itemId))
  
  return (
    <div>
      <span>상품 ID: {itemId}</span>
      <button onClick={() => setQuantity(quantity - 1)}>-</button>
      <span>{quantity}</span>
      <button onClick={() => setQuantity(quantity + 1)}>+</button>
    </div>
  )
}

function TotalPrice() {
  const [totalPrice] = useAtom(totalPriceAtom)
  
  return <div>총 가격: ₩{totalPrice.toLocaleString()}</div>
}

import { createSlice, configureStore } from '@reduxjs/toolkit'

// ✅ createSlice로 액션과 리듀서를 한 번에 정의
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
    history: []
  },
  reducers: {
    increment: (state) => {
      state.history.push(state.value) // Immer로 불변성 자동 처리
      state.value += 1
    },
    decrement: (state) => {
      state.history.push(state.value)
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.history.push(state.value)
      state.value += action.payload
    },
    reset: (state) => {
      state.history.push(state.value)
      state.value = 0
    }
  }
})

// 액션 생성자들이 자동으로 생성됨
export const { increment, decrement, incrementByAmount, reset } = counterSlice.actions

// 리듀서를 스토어에 등록
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

// React 컴포넌트에서 사용
import { useSelector, useDispatch } from 'react-redux'

function Counter() {
  const count = useSelector(state => state.counter.value)
  const history = useSelector(state => state.counter.history)
  const dispatch = useDispatch()
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
      
      <div>
        <h3>히스토리:</h3>
        {history.map((value, index) => (
          <span key={index}>{value} → </span>
        ))}
      </div>
    </div>
  )
}

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'

// ✅ 비동기 thunk 정의
export const fetchUserById = createAsyncThunk(
  'users/fetchById',
  async (userId, { rejectWithValue }) => {
    try {
      const response = await fetch(`/api/users/${userId}`)
      
      if (!response.ok) {
        return rejectWithValue('사용자를 찾을 수 없습니다.')
      }
      
      return await response.json()
    } catch (error) {
      return rejectWithValue(error.message)
    }
  }
)

// 사용자 관리 슬라이스
const usersSlice = createSlice({
  name: 'users',
  initialState: {
    entities: {},
    loading: 'idle',
    error: null
  },
  reducers: {
    userUpdated: (state, action) => {
      const { id, changes } = action.payload
      if (state.entities[id]) {
        Object.assign(state.entities[id], changes)
      }
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.loading = 'pending'
        state.error = null
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.loading = 'idle'
        state.entities[action.payload.id] = action.payload
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.loading = 'idle'
        state.error = action.payload
      })
  }
})

// 셀렉터 정의
const selectUserById = (state, userId) => state.users.entities[userId]
const selectUsersLoading = (state) => state.users.loading === 'pending'
const selectUsersError = (state) => state.users.error

// 컴포넌트에서 사용
function UserProfile({ userId }) {
  const dispatch = useDispatch()
  const user = useSelector(state => selectUserById(state, userId))
  const isLoading = useSelector(selectUsersLoading)
  const error = useSelector(selectUsersError)
  
  useEffect(() => {
    if (!user) {
      dispatch(fetchUserById(userId))
    }
  }, [dispatch, userId, user])
  
  if (isLoading) return <div>로딩 중...</div>
  if (error) return <div>오류: {error}</div>
  if (!user) return <div>사용자를 찾을 수 없습니다.</div>
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  )
}

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// ✅ API 슬라이스 정의
export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({
    baseUrl: '/api/',
    prepareHeaders: (headers, { getState }) => {
      // 인증 토큰 자동 추가
      const token = getState().auth.token
      if (token) {
        headers.set('authorization', `Bearer ${token}`)
      }
      return headers
    },
  }),
  tagTypes: ['Post', 'User'],
  endpoints: (builder) => ({
    // 게시글 목록 조회
    getPosts: builder.query({
      query: ({ page = 1, limit = 10 } = {}) => 
        `posts?page=${page}&limit=${limit}`,
      providesTags: (result) =>
        result
          ? [
              ...result.data.map(({ id }) => ({ type: 'Post', id })),
              { type: 'Post', id: 'LIST' },
            ]
          : [{ type: 'Post', id: 'LIST' }],
    }),
    
    // 특정 게시글 조회
    getPost: builder.query({
      query: (id) => `posts/${id}`,
      providesTags: (result, error, id) => [{ type: 'Post', id }],
    }),
    
    // 게시글 생성
    createPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: [{ type: 'Post', id: 'LIST' }],
    }),
    
    // 게시글 수정
    updatePost: builder.mutation({
      query: ({ id, ...patch }) => ({
        url: `posts/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
    }),
    
    // 게시글 삭제
    deletePost: builder.mutation({
      query: (id) => ({
        url: `posts/${id}`,
        method: 'DELETE',
      }),
      invalidatesTags: (result, error, id) => [
        { type: 'Post', id },
        { type: 'Post', id: 'LIST' },
      ],
    }),
  }),
})

// 자동 생성된 훅들
export const {
  useGetPostsQuery,
  useGetPostQuery,
  useCreatePostMutation,
  useUpdatePostMutation,
  useDeletePostMutation,
} = postsApi

// 스토어 설정
const store = configureStore({
  reducer: {
    [postsApi.reducerPath]: postsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
})

// 컴포넌트에서 사용
function PostsList() {
  const {
    data: posts,
    error,
    isLoading,
    isFetching,
    refetch
  } = useGetPostsQuery({ page: 1, limit: 10 })
  
  const [createPost] = useCreatePostMutation()
  const [deletePost] = useDeletePostMutation()
  
  const handleCreatePost = async (postData) => {
    try {
      await createPost(postData).unwrap()
      // 성공 시 자동으로 목록이 다시 페칭됨
    } catch (error) {
      console.error('게시글 생성 실패:', error)
    }
  }
  
  if (isLoading) return <div>로딩 중...</div>
  if (error) return <div>오류 발생: {error.message}</div>
  
  return (
    <div>
      <button onClick={refetch} disabled={isFetching}>
        새로고침 {isFetching && '(로딩 중...)'}
      </button>
      
      {posts?.data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
          <button onClick={() => deletePost(post.id)}>
            삭제
          </button>
        </div>
      ))}
    </div>
  )
}

// 실제 번들 크기 측정 코드 (webpack-bundle-analyzer 사용)
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  // webpack 설정
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      generateStatsFile: true,
      reportFilename: '../bundle-report.html'
    })
  ]
}

// 결과: Zustand가 압도적으로 가벼움

// 성능 측정용 테스트 컴포넌트
import { Profiler } from 'react'

function PerformanceTest() {
  const [measurements, setMeasurements] = useState([])

  const onRenderCallback = (id, phase, actualDuration) => {
    setMeasurements(prev => [...prev, {
      library: id,
      phase,
      duration: actualDuration,
      timestamp: Date.now()
    }])
  }

  return (
    <div>
      <Profiler id="zustand" onRender={onRenderCallback}>
        <ZustandCounterTest />
      </Profiler>
      
      <Profiler id="jotai" onRender={onRenderCallback}>
        <JotaiCounterTest />
      </Profiler>
      
      <Profiler id="redux-toolkit" onRender={onRenderCallback}>
        <ReduxCounterTest />
      </Profiler>
    </div>
  )
}

// 메모리 사용량 측정 코드
function measureMemoryUsage(testFunction, iterations = 1000) {
  const startMemory = performance.memory.usedJSHeapSize
  
  // 테스트 실행
  for (let i = 0; i < iterations; i++) {
    testFunction()
  }
  
  // 가비지 컬렉션 강제 실행
  if (window.gc) {
    window.gc()
  }
  
  const endMemory = performance.memory.usedJSHeapSize
  return (endMemory - startMemory) / 1024 / 1024 // MB 단위
}

// 결과 (1000회 상태 업데이트 후 메모리 증가량)
const memoryResults = {
  zustand: 1.2, // MB
  jotai: 0.8,   // MB (가장 효율적)
  reduxToolkit: 2.1 // MB
}

// 🎯 추천: Zustand
// 이유: 빠른 개발, 적은 보일러플레이트, 쉬운 학습

// 개인 블로그, 랜딩 페이지, 토이 프로젝트에 적합
const useAppStore = create((set, get) => ({
  // 인증 상태
  user: null,
  setUser: (user) => set({ user }),
  
  // UI 상태  
  theme: 'light',
  toggleTheme: () => set(state => ({ 
    theme: state.theme === 'light' ? 'dark' : 'light' 
  })),
  
  // 간단한 비즈니스 로직
  cart: [],
  addToCart: (item) => set(state => ({
    cart: [...state.cart, item]
  })),
  
  // 모든 것이 하나의 스토어에 ✅
}))

// 💡 소규모 프로젝트 체크리스트
const SmallProjectChecklist = {
  teamSize: '<= 3명',
  developmentTime: '<= 3개월', 
  stateComplexity: '단순함',
  needsTimeTravel: false,
  needsSSR: false,
  recommendation: 'Zustand ⭐⭐⭐⭐⭐'
}

// 🎯 1순위: Jotai (복잡한 상태 관계)
// 🎯 2순위: Zustand (간단한 상태 구조)

// 관리자 대시보드, B2B 애플리케이션에 적합

// Jotai 접근법 - 도메인별 atom 분리
const userAtom = atom(null)
const organizationAtom = atom(null)
const permissionsAtom = atom([])

// 파생된 상태들
const canEditAtom = atom((get) => {
  const permissions = get(permissionsAtom)
  return permissions.includes('edit')
})

const currentOrgUsersAtom = atom(async (get) => {
  const org = get(organizationAtom)
  if (!org) return []
  
  const response = await fetch(`/api/orgs/${org.id}/users`)
  return response.json()
})

// 또는 Zustand 접근법 - 슬라이스 패턴
const useUserStore = create(subscribeWithSelector((set, get) => ({
  user: null,
  setUser: (user) => set({ user }),
  updateProfile: async (data) => {
    const user = get().user
    const updated = await updateUserProfile(user.id, data)
    set({ user: updated })
  }
})))

const useOrganizationStore = create((set) => ({
  organization: null,
  members: [],
  setOrganization: (org) => set({ organization: org }),
  loadMembers: async (orgId) => {
    const members = await fetchOrgMembers(orgId)
    set({ members })
  }
}))

// 💡 중규모 프로젝트 결정 기준
const mediumProjectDecision = (projectFeatures) => {
  if (projectFeatures.hasComplexStateRelationships) {
    return 'Jotai 추천 - 원자적 접근법이 유리'
  }
  
  if (projectFeatures.needsSimpleGlobalState) {
    return 'Zustand 추천 - 간단하고 효율적'
  }
  
  if (projectFeatures.hasRealTimeFeatures) {
    return 'Jotai 추천 - 세밀한 구독 제어'
  }
}

// 🎯 추천: Redux Toolkit
// 이유: 예측 가능성, 강력한 DevTools, 팀 협업

// 전자상거래, 금융 서비스, 엔터프라이즈 애플리케이션

// 도메인별 슬라이스 분리 전략
const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    token: null,
    permissions: []
  },
  reducers: {
    loginSuccess: (state, action) => {
      state.user = action.payload.user
      state.token = action.payload.token
      state.permissions = action.payload.permissions
    },
    logout: (state) => {
      state.user = null
      state.token = null
      state.permissions = []
    }
  }
})

const productsSlice = createSlice({
  name: 'products',
  initialState: {
    items: [],
    categories: [],
    filters: {
      category: null,
      priceRange: [0, 1000],
      sortBy: 'name'
    },
    pagination: {
      page: 1,
      limit: 20,
      total: 0
    }
  },
  reducers: {
    setProducts: (state, action) => {
      state.items = action.payload
    },
    updateFilters: (state, action) => {
      Object.assign(state.filters, action.payload)
      state.pagination.page = 1 // 필터 변경 시 첫 페이지로
    },
    setPage: (state, action) => {
      state.pagination.page = action.payload
    }
  }
})

// RTK Query로 API 관리
const ecommerceApi = createApi({
  reducerPath: 'ecommerceApi',
  baseQuery: fetchBaseQuery({
    baseUrl: '/api',
    prepareHeaders: (headers, { getState }) => {
      const token = getState().auth.token
      if (token) {
        headers.set('authorization', `Bearer ${token}`)
      }
      return headers
    },
  }),
  tagTypes: ['Product', 'Order', 'User'],
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: ({ filters, pagination }) => ({
        url: 'products',
        params: { ...filters, ...pagination }
      }),
      providesTags: ['Product']
    }),
    
    createOrder: builder.mutation({
      query: (orderData) => ({
        url: 'orders',
        method: 'POST',
        body: orderData
      }),
      invalidatesTags: ['Order']
    })
  })
})

// 💡 대규모 프로젝트 성공 조건
const enterpriseProjectSuccess = {
  // 팀 협업
  codeReview: '필수 - 모든 상태 변화가 명시적',
  documentation: '상태 구조와 액션 문서화',
  testing: '액션과 리듀서 단위 테스트',
  
  // 성능 관리
  memoization: 'React.memo, useSelector 최적화',
  codesplitting: '라우트별 슬라이스 분리',
  devtools: 'Redux DevTools로 디버깅',
  
  // 유지보수
  strictTypeScript: '엄격한 타입 체크',
  eslintRules: 'Redux 관련 ESLint 규칙',
  migrationStrategy: '점진적 마이그레이션 계획'
}

// 💼 실무 사례: Redux → Zustand 마이그레이션 

// BEFORE: Redux (300줄의 보일러플레이트)
const ADD_TODO = 'ADD_TODO'
const TOGGLE_TODO = 'TOGGLE_TODO'
const SET_FILTER = 'SET_FILTER'

const addTodo = (text) => ({ type: ADD_TODO, payload: text })
const toggleTodo = (id) => ({ type: TOGGLE_TODO, payload: id })
const setFilter = (filter) => ({ type: SET_FILTER, payload: filter })

const initialState = {
  todos: [],
  filter: 'ALL'
}

const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, {
          id: Date.now(),
          text: action.payload,
          completed: false
        }]
      }
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      }
    case SET_FILTER:
      return { ...state, filter: action.payload }
    default:
      return state
  }
}

// AFTER: Zustand (50줄로 줄어듦!)
const useTodoStore = create((set) => ({
  todos: [],
  filter: 'ALL',
  
  addTodo: (text) => set((state) => ({
    todos: [...state.todos, {
      id: Date.now(),
      text,
      completed: false
    }]
  })),
  
  toggleTodo: (id) => set((state) => ({
    todos: state.todos.map(todo =>
      todo.id === id 
        ? { ...todo, completed: !todo.completed }
        : todo
    )
  })),
  
  setFilter: (filter) => set({ filter }),
  
  // 파생된 상태도 간단하게
  filteredTodos: (state) => {
    switch (state.filter) {
      case 'ACTIVE': return state.todos.filter(t => !t.completed)
      case 'COMPLETED': return state.todos.filter(t => t.completed)
      default: return state.todos
    }
  }
}))

// 🎉 마이그레이션 결과
const migrationResults = {
  codeReduction: '80% 코드 감소',
  learningTime: '2시간 vs 2일',
  bugReduction: '40% 버그 감소 (타입 안전성)',
  teamSatisfaction: '4.8/5점 (이전 3.2점)'
}