Split View: 상태 관리 완전 비교 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'

// Server state fetching - automatic caching and revalidation
function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json()),
    staleTime: 5 * 60 * 1000, // Stay fresh for 5 minutes
    gcTime: 30 * 60 * 1000,   // Garbage collect after 30 minutes
  })
}

// Server state mutation - with optimistic update
function useCreateUser() {
  const queryClient = useQueryClient()

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

    // Optimistic update
    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'] })
    },
  })
}

User request → Check cache → Return cached data immediately (stale)
                            ↓
                 Fetch new data in background (revalidate)
                            ↓
                 Update UI with fresh data

// Suitable for infrequently changing state: theme, auth, locale
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
}

// Bad pattern: All state in a single Context
const AppContext = createContext({
  user: null,
  theme: 'light',
  notifications: [],
  sidebar: false,
})

// Problem: Changing just sidebar causes ALL components
// using user, theme, or notifications to re-render!

// Good pattern: Separate Context per state concern
function App() {
  return (
    <ThemeProvider>
      <AuthProvider>
        <NotificationProvider>
          <SidebarProvider>
            <Layout />
          </SidebarProvider>
        </NotificationProvider>
      </AuthProvider>
    </ThemeProvider>
  )
}

// Each Context manages only its own state,
// preventing unnecessary re-renders

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 is built in - no need to worry about immutability
      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 }),
}))

// Usage: Call anywhere without a 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: 'en' },

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

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

// 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),
})

// Combine
const useStore = create((...args) => ({
  ...createUserSlice(...args),
  ...createCartSlice(...args),
}))

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

// Basic atoms
const countAtom = atom(0)
const nameAtom = atom('Guest')

// Derived atom
const doubleCountAtom = atom((get) => get(countAtom) * 2)

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

// Usage
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>
  )
}

// Async atom - automatic React Suspense integration
const userAtom = atom(async () => {
  const response = await fetch('/api/user')
  return response.json()
})

// Async atom with dependencies
const userPostsAtom = atom(async (get) => {
  const user = await get(userAtom)
  const response = await fetch(`/api/users/${user.id}/posts`)
  return response.json()
})

// Loading handled via 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'

// Create independent atoms per ID
const todoAtomFamily = atomFamily((id: string) =>
  atom({
    id,
    text: '',
    completed: false,
  })
)

// Each Todo is managed by an independent atom,
// so changing one Todo does not cause others to re-render
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 - dynamic atoms
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'

// Create signals
const count = signal(0)
const doubled = computed(() => count.value * 2)

// Use in components - direct DOM update without re-rendering
function Counter() {
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => count.value++}>+1</button>
    </div>
  )
}

// Side effects
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)
  }
}

What is the project scale?
├── Small (1-3 people, simple UI)
│   ├── Does state change frequently?
│   │   ├── Yes → Zustand
│   │   └── No → React Context
│   └── Is server data the focus?
│       └── Yes → TanStack Query alone is sufficient
│
├── Medium (4-10 people, complex UI)
│   ├── Are there many independent states?
│   │   ├── Yes → Jotai
│   │   └── No → Zustand
│   └── Is server state complex?
│       └── Yes → TanStack Query + Zustand/Jotai
│
└── Large (10+ people, enterprise)
    ├── Is there existing Redux code?
    │   ├── Yes → Migrate to Redux Toolkit
    │   └── No → Zustand + TanStack Query
    └── Is strict architecture required?
        └── 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 removed! 50% less code!