title: 상태 관리
tags:
- frontend상태 관리
상태 관리는 애플리케이션의 UI와 데이터 간의 동기화를 유지하는 핵심 역할입니다. 특히 전역적으로 공유해야 할 데이터(로그인 정보, 장바구니, 모달 상태 등)를 다룰 때 필요합니다.
action → dispatcher → store → view → action
action → reducer → store → view
Flux 패턴을 단순화하여 Redux가 만들어졌습니다.
createSlice, configureStore, createAsyncThunk 등 유틸 API를 통해 보일러플레이트 감소const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: state => state + 1,
decrement: state => state - 1,
},
});
Zustand는 Redux보다 훨씬 가볍고 직관적인 상태 관리 라이브러리입니다. 특히 React에서 Context 없이도 전역 상태를 다룰 수 있는 점이 특징입니다.
import { create } from 'zustand';
export const useCartStore = create(set => ({
items: [],
addToCart: (item) => set(state => ({ items: [...state.items, item] })),
}));
| 항목 | Redux | Zustand |
|---|---|---|
| 코드 복잡도 | 복잡 (툴킷으로 개선 가능) | 매우 단순 |
| 러닝 커브 | 중간 이상 | 낮음 |
| 상태 구조화 | 명시적 (slice/reducer) | 자유도 높음 |
| 비동기 처리 | thunk, saga 등 미들웨어 필요 | 자체 지원 (비동기 함수에서 set 사용 가능) |
| 리렌더링 제어 | 가능하지만 추가 설정 필요 | selector로 간단하게 제어 가능 |
const changeUsername = (name) => ({
type: "CHANGE_NAME",
payload: name,
});
const reducer = (state, action) => {
switch (action.type) {
case "CHANGE_NAME":
return { ...state, name: action.payload };
default:
return state;
}
};
const store = createStore(reducer, { name: '김코딩' });
store.dispatch(changeUsername('Steve'));
"지금 이 액션을 처리하는 데 필요한 데이터를 담은 객체"
{
type: 'UPDATE_TASK',
payload: {
taskId: 'task-1',
taskName: '새로운 이름',
}
}
"전역으로 공유되어야 하는가?"를 기준으로 전역(Zustand/Redux) vs 지역(useState) 상태를 나누면 좋습니다.
const [loading, setLoading] = useState(false); // 지역 상태
const { addToCart } = useCartStore(); // 전역 상태