React 상태 관리 라이브러리 Zustand, Jotai, Redux Toolkit 비교

const useStore = create((set) => ({ count: 0 }));
const countAtom = atom(0);
const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 } });

import { create } from 'zustand';
 
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
 
function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
 
  return <button onClick={increment}>{count}</button>;
}

import { atom, useAtom } from 'jotai';
 
const countAtom = atom(0);
 
function Counter() {
  const [count, setCount] = useAtom(countAtom);
 
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2);
 
// 비동기 파생도 가능
const userAtom = atom(async (get) => {
  const id = get(userIdAtom);
  const response = await fetch(`/api/users/${id}`);
  return response.json();
});

import { createSlice, configureStore } from '@reduxjs/toolkit';
import { useSelector, useDispatch } from 'react-redux';
 
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1; },
  },
});
 
const store = configureStore({ reducer: { counter: counterSlice.reducer } });
 
function Counter() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();
 
  return <button onClick={() => dispatch(counterSlice.actions.increment())}>{count}</button>;
}

const useStore = create((set) => ({
  name: '',
  age: 0,
  setName: (name) => set({ name }),
  setAge: (age) => set({ age }),
}));
 
function AgeDisplay() {
  const age = useStore((s) => s.age);
  return <span>{age}</span>;
}

const nameAtom = atom('');
const ageAtom = atom(0);
 
function AgeDisplay() {
  const age = useAtomValue(ageAtom);
  return <span>{age}</span>;
}

const selectAge = (state) => state.profile.age;
 
function AgeDisplay() {
  const age = useSelector(selectAge);
  return <span>{age}</span>;
}

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 }),
}));
 
// 컴포넌트에서 필요한 것만 구독
function TodoList() {
  const todos = useTodoStore((state) => state.todos);
  const filter = useTodoStore((state) => state.filter);
 
  const filtered = todos.filter((todo) =>
    filter === 'all' ? true : filter === 'done' ? todo.completed : !todo.completed
  );
 
  return filtered.map((todo) => <TodoItem key={todo.id} todo={todo} />);
}

const todosAtom = atom([]);
const filterAtom = atom('all');
 
// 파생 Atom으로 필터링 로직 분리
const filteredTodosAtom = atom((get) => {
  const todos = get(todosAtom);
  const filter = get(filterAtom);
 
  if (filter === 'all') return todos;
  if (filter === 'done') return todos.filter((t) => t.completed);
  return todos.filter((t) => !t.completed);
});
 
function TodoList() {
  const filtered = useAtomValue(filteredTodosAtom);
 
  return filtered.map((todo) => <TodoItem key={todo.id} todo={todo} />);
}
 
function FilterButtons() {
  const [filter, setFilter] = useAtom(filterAtom);
 
  return (
    <div>
      {['all', 'done', 'active'].map((f) => (
        <button key={f} onClick={() => setFilter(f)} data-active={filter === f}>
          {f}
        </button>
      ))}
    </div>
  );
}

const todoSlice = createSlice({
  name: 'todos',
  initialState: { items: [], filter: 'all' },
  reducers: {
    addTodo: (state, action) => {
      state.items.push({ id: Date.now(), text: action.payload, completed: false });
    },
    toggleTodo: (state, action) => {
      const todo = state.items.find((t) => t.id === action.payload);
      if (todo) todo.completed = !todo.completed;
    },
    setFilter: (state, action) => {
      state.filter = action.payload;
    },
  },
});
 
// Memoized selector
const selectFilteredTodos = createSelector(
  [(state) => state.todos.items, (state) => state.todos.filter],
  (items, filter) => {
    if (filter === 'all') return items;
    if (filter === 'done') return items.filter((t) => t.completed);
    return items.filter((t) => !t.completed);
  }
);

const useThemeStore = create(
  persist(
    (set) => ({
      theme: 'light',
      toggleTheme: () =>
        set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
    }),
    { name: 'theme-storage' }
  )
);

const emailAtom = atom('');
const passwordAtom = atom('');
const confirmPasswordAtom = atom('');
 
const passwordMatchAtom = atom(
  (get) => get(passwordAtom) === get(confirmPasswordAtom)
);
 
const isFormValidAtom = atom((get) => {
  const email = get(emailAtom);
  const password = get(passwordAtom);
  return email.includes('@') && password.length >= 8 && get(passwordMatchAtom);
});

const auditSlice = createSlice({
  name: 'audit',
  initialState: { logs: [] },
  reducers: {
    pushed: (state, action) => {
      state.logs.push(action.payload);
    },
  },
});

const useStore = create(
  devtools(
    persist(
      immer((set) => ({
        count: 0,
        increment: () => set((state) => { state.count += 1; }),
      })),
      { name: 'my-store' }
    )
  )
);

import { atomWithStorage } from 'jotai/utils';
 
// localStorage 자동 동기화
const themeAtom = atomWithStorage('theme', 'light');
 
// Atom에 디버깅 레이블
countAtom.debugLabel = 'count';

const store = configureStore({
  reducer: { todos: todoSlice.reducer, [api.reducerPath]: api.reducer },
  middleware: (getDefault) => getDefault().concat(api.middleware),
});

// Zustand: 요청별 Store 생성 패턴
import { createStore } from 'zustand';
 
const createTodoStore = () =>
  createStore((set) => ({
    todos: [],
    addTodo: (text) =>
      set((state) => ({
        todos: [...state.todos, { id: Date.now(), text, completed: false }],
      })),
  }));
 
// Context로 감싸서 요청별 격리
const TodoStoreContext = createContext(null);
 
export function TodoStoreProvider({ children }) {
  const storeRef = useRef();
  if (!storeRef.current) {
    storeRef.current = createTodoStore();
  }
  return (
    <TodoStoreContext.Provider value={storeRef.current}>
      {children}
    </TodoStoreContext.Provider>
  );
}

// Jotai: 서버 데이터 하이드레이션
'use client';
import { useHydrateAtoms } from 'jotai/utils';
 
function TodoPage({ initialTodos }) {
  useHydrateAtoms([[todosAtom, initialTodos]]);
  // ...
}

전역 상태 (인증, 테마)     → Zustand
UI 로컬 상태 (모달, 폼)    → Jotai
서버 상태 (API 캐싱)       → TanStack Query