Zustand — 가벼운 상태 관리 | 웹 개발 기초 | JIT

🌐 웹 개발 기초›Zustand — 가벼운 상태 관리1/5

Zustand은 Redux의 보일러플레이트를 95% 줄였습니다

Redux (보일러플레이트 多)

typescript

// actions.ts
const INCREMENT = "INCREMENT";
const increment = () => ({ type: INCREMENT });
// reducer.ts
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    default:
      return state;
  }
}
// store.ts
const store = createStore(counterReducer);
// 사용 (Provider 필요)
const count = useSelector(s => s.count);
dispatch(increment());

Zustand (간결!)

typescript

// store.ts — 이게 전부!
import { create } from "zustand";
const useCounter = create((set) => ({
  count: 0,
  increment: () => set((s) => ({
    count: s.count + 1
  })),
}));
// 사용 (Provider 불필요!)
const count = useCounter(s => s.count);
const inc = useCounter(s => s.increment);
inc();

탭하여 계속 ▸

1 / 5