상태 관리 완전 비교 2025: React Context vs Zustand vs Jotai vs Redux Toolkit vs Recoil

┌─────────────────────────────────────────────────┐
│                 Application State                │
├──────────────┬──────────────┬───────────────────┤
│ Server State │ Client State │ URL / Form State  │
│  TanStack Q  │   Zustand    │  nuqs + RHF       │
│    SWR       │   Jotai      │                   │
│              │   Redux TK   │                   │
└──────────────┴──────────────┴───────────────────┘

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

// 서버 상태 조회 - 캐싱, 재검증 자동 처리
function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json()),
    staleTime: 5 * 60 * 1000, // 5분간 fresh 상태 유지
    gcTime: 30 * 60 * 1000,   // 30분 후 가비지 컬렉션
  })
}

// 서버 상태 변경 - 낙관적 업데이트 포함
function useCreateUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: (newUser: User) =>
      fetch('/api/users', {
        method: 'POST',
        body: JSON.stringify(newUser),
      }).then(res => res.json()),

    // 낙관적 업데이트
    onMutate: async (newUser) => {
      await queryClient.cancelQueries({ queryKey: ['users'] })
      const previous = queryClient.getQueryData(['users'])
      queryClient.setQueryData(['users'], (old: User[]) => [...old, newUser])
      return { previous }
    },
    onError: (err, newUser, context) => {
      queryClient.setQueryData(['users'], context?.previous)
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] })
    },
  })
}

사용자 요청 → 캐시 확인 → 캐시 데이터 즉시 반환 (stale)
                       ↓
              백그라운드에서 새 데이터 가져오기 (revalidate)
                       ↓
              새 데이터로 UI 업데이트

// 테마, 인증, 로케일 등 변경이 드문 상태에 적합
const ThemeContext = createContext<ThemeContextType | null>(null)

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')

  const value = useMemo(() => ({ theme, setTheme }), [theme])

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  )
}

function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) throw new Error('useTheme must be used within ThemeProvider')
  return context
}

// 나쁜 패턴: 하나의 Context에 모든 상태
const AppContext = createContext({
  user: null,
  theme: 'light',
  notifications: [],
  sidebar: false,
})

// 문제: sidebar만 변경해도 user, theme, notifications를 사용하는
// 모든 컴포넌트가 리렌더링됩니다!

// 좋은 패턴: 상태별로 Context 분리
function App() {
  return (
    <ThemeProvider>
      <AuthProvider>
        <NotificationProvider>
          <SidebarProvider>
            <Layout />
          </SidebarProvider>
        </NotificationProvider>
      </AuthProvider>
    </ThemeProvider>
  )
}

// 각 Context는 자신의 상태만 관리하므로
// 불필요한 리렌더링이 발생하지 않습니다

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

interface TodoState {
  items: Todo[]
  filter: 'all' | 'active' | 'completed'
}

const todoSlice = createSlice({
  name: 'todos',
  initialState: { items: [], filter: 'all' } as TodoState,
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      // Immer가 내장되어 있어 불변성을 신경 쓰지 않아도 됩니다
      state.items.push({
        id: crypto.randomUUID(),
        text: action.payload,
        completed: false,
      })
    },
    toggleTodo: (state, action: PayloadAction<string>) => {
      const todo = state.items.find(t => t.id === action.payload)
      if (todo) todo.completed = !todo.completed
    },
    setFilter: (state, action: PayloadAction<TodoState['filter']>) => {
      state.filter = action.payload
    },
  },
})

export const { addTodo, toggleTodo, setFilter } = todoSlice.actions
export default todoSlice.reducer

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

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User', 'Post'],
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => '/users',
      providesTags: ['User'],
    }),
    createUser: builder.mutation<User, Partial<User>>({
      query: (body) => ({
        url: '/users',
        method: 'POST',
        body,
      }),
      invalidatesTags: ['User'],
    }),
  }),
})

export const { useGetUsersQuery, useCreateUserMutation } = api

import { create } from 'zustand'

interface BearStore {
  bears: number
  increase: () => void
  decrease: () => void
  reset: () => void
}

const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  decrease: () => set((state) => ({ bears: state.bears - 1 })),
  reset: () => set({ bears: 0 }),
}))

// 사용: Provider 없이 어디서나 호출
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <span>{bears} bears</span>
}

function BearControls() {
  const increase = useBearStore((state) => state.increase)
  return <button onClick={increase}>Add bear</button>
}

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

interface AppStore {
  user: User | null
  preferences: Preferences
  setUser: (user: User | null) => void
  updatePreference: (key: string, value: unknown) => void
}

const useAppStore = create<AppStore>()(
  devtools(
    persist(
      immer((set) => ({
        user: null,
        preferences: { theme: 'light', language: 'ko' },

        setUser: (user) => set((state) => {
          state.user = user
        }),

        updatePreference: (key, value) => set((state) => {
          state.preferences[key] = value
        }),
      })),
      {
        name: 'app-storage', // localStorage 키
        partialize: (state) => ({
          preferences: state.preferences,
        }),
      }
    ),
    { name: 'AppStore' } // DevTools 이름
  )
)

// userSlice.ts
const createUserSlice = (set: SetState, get: GetState) => ({
  user: null,
  login: async (credentials: Credentials) => {
    const user = await authApi.login(credentials)
    set({ user })
  },
  logout: () => set({ user: null }),
})

// cartSlice.ts
const createCartSlice = (set: SetState, get: GetState) => ({
  items: [],
  addItem: (item: CartItem) =>
    set((state) => ({ items: [...state.items, item] })),
  totalPrice: () =>
    get().items.reduce((sum, item) => sum + item.price, 0),
})

// 합치기
const useStore = create((...args) => ({
  ...createUserSlice(...args),
  ...createCartSlice(...args),
}))

import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'

// 기본 atom
const countAtom = atom(0)
const nameAtom = atom('Guest')

// 파생 atom (derived)
const doubleCountAtom = atom((get) => get(countAtom) * 2)

// 읽기/쓰기 atom
const countWithLogAtom = atom(
  (get) => get(countAtom),
  (get, set, newValue: number) => {
    console.log(`Count changed: ${get(countAtom)} -> ${newValue}`)
    set(countAtom, newValue)
  }
)

// 사용
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const doubleCount = useAtomValue(doubleCountAtom)

  return (
    <div>
      <p>Count: {count}, Double: {doubleCount}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  )
}

// 비동기 atom - React Suspense와 자동 통합
const userAtom = atom(async () => {
  const response = await fetch('/api/user')
  return response.json()
})

// 의존성이 있는 비동기 atom
const userPostsAtom = atom(async (get) => {
  const user = await get(userAtom)
  const response = await fetch(`/api/users/${user.id}/posts`)
  return response.json()
})

// Suspense로 로딩 처리
function UserPosts() {
  const posts = useAtomValue(userPostsAtom)
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserPosts />
    </Suspense>
  )
}

import { atomFamily } from 'jotai/utils'

// ID별로 독립적인 atom 생성
const todoAtomFamily = atomFamily((id: string) =>
  atom({
    id,
    text: '',
    completed: false,
  })
)

// 각 Todo는 독립적인 atom으로 관리되어
// 하나의 Todo 변경이 다른 Todo의 리렌더링을 일으키지 않습니다
function TodoItem({ id }: { id: string }) {
  const [todo, setTodo] = useAtom(todoAtomFamily(id))
  return (
    <label>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => setTodo(prev => ({ ...prev, completed: !prev.completed }))}
      />
      {todo.text}
    </label>
  )
}

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil'

const todoListAtom = atom({
  key: 'todoList',
  default: [] as Todo[],
})

const filteredTodoSelector = selector({
  key: 'filteredTodos',
  get: ({ get }) => {
    const list = get(todoListAtom)
    const filter = get(todoFilterAtom)
    switch (filter) {
      case 'completed': return list.filter(t => t.completed)
      case 'active': return list.filter(t => !t.completed)
      default: return list
    }
  },
})

// atomFamily - 동적 atom
const userAtomFamily = atomFamily({
  key: 'user',
  default: (userId: string) => async () => {
    const res = await fetch(`/api/users/${userId}`)
    return res.json()
  },
})

import { signal, computed, effect } from '@preact/signals-react'

// Signal 생성
const count = signal(0)
const doubled = computed(() => count.value * 2)

// 컴포넌트에서 사용 - 리렌더링 없이 DOM 직접 업데이트
function Counter() {
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => count.value++}>+1</button>
    </div>
  )
}

// 부수 효과
effect(() => {
  console.log(`Count is now: ${count.value}`)
})

import { createSignal, createMemo, createEffect } from 'solid-js'

function Counter() {
  const [count, setCount] = createSignal(0)
  const doubled = createMemo(() => count() * 2)

  createEffect(() => {
    console.log(`Count: ${count()}`)
  })

  return (
    <div>
      <p>Count: {count()}, Doubled: {doubled()}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  )
}

import { signal, computed, effect } from '@angular/core'

@Component({
  template: `
    <p>Count: {{ count() }}, Doubled: {{ doubled() }}</p>
    <button (click)="increment()">+1</button>
  `
})
class CounterComponent {
  count = signal(0)
  doubled = computed(() => this.count() * 2)

  constructor() {
    effect(() => {
      console.log(`Count: ${this.count()}`)
    })
  }

  increment() {
    this.count.update(c => c + 1)
  }
}

프로젝트 규모는?
├── 소규모 (1-3명, 단순 UI)
│   ├── 상태가 자주 변하나요?
│   │   ├── Yes → Zustand
│   │   └── No → React Context
│   └── 서버 데이터가 중심인가요?
│       └── Yes → TanStack Query만으로 충분
│
├── 중규모 (4-10명, 복잡한 UI)
│   ├── 많은 독립적 상태가 있나요?
│   │   ├── Yes → Jotai
│   │   └── No → Zustand
│   └── 서버 상태가 복잡한가요?
│       └── Yes → TanStack Query + Zustand/Jotai
│
└── 대규모 (10명+, 엔터프라이즈)
    ├── 기존 Redux 코드가 있나요?
    │   ├── Yes → Redux Toolkit으로 마이그레이션
    │   └── No → Zustand + TanStack Query
    └── 엄격한 아키텍처가 필요한가요?
        └── Yes → Redux Toolkit

// Before: Redux Toolkit
// store.ts
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
})

// Component
function Counter() {
  const count = useSelector((state: RootState) => state.counter.value)
  const dispatch = useDispatch()
  return <button onClick={() => dispatch(increment())}>Count: {count}</button>
}

// After: Zustand
const useCounterStore = create<CounterStore>((set) => ({
  value: 0,
  increment: () => set((s) => ({ value: s.value + 1 })),
  decrement: () => set((s) => ({ value: s.value - 1 })),
}))

function Counter() {
  const count = useCounterStore((s) => s.value)
  const increment = useCounterStore((s) => s.increment)
  return <button onClick={increment}>Count: {count}</button>
}

// Before: React Context
const CountContext = createContext({ count: 0, setCount: () => {} })

function CountProvider({ children }) {
  const [count, setCount] = useState(0)
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  )
}

function Counter() {
  const { count, setCount } = useContext(CountContext)
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
}

// After: Jotai
const countAtom = atom(0)

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
}
// Provider 제거! 코드 50% 감소!