Redux Toolkit을 완전히 이해하는 시각적 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React 개발자 및 Redux 초보자
- 난이도 : 중간 (Redux 개념 이해 필요)
핵심 요약
- Redux Toolkit(RTK) 주요 기능 :
createSlice로 액션 생성자 및 리듀서 자동 생성,configureStore로 단일 라인 스토어 설정, Immer를 통한 불변성 관리, async 처리를 위한createAsyncThunk - 데이터 흐름 :
Component→dispatch()→Store→Slice Reducer→Component 재렌더링 - 핵심 개념 :
slice.name→action type("counter/increment")과reducer명(increment)의 일관된 이름 규칙
섹션별 세부 요약
1. Redux Toolkit이 해결하는 문제
- 복잡한 상태 관리 문제 : 여러 컴포넌트 간 데이터 공유, 비동기 처리, 불필요한 boilerplate 코드
- Redux의 단점 : 많은 수동 설정, 복잡한 액션 타입 정의, 디버깅 어려움
2. Redux Toolkit의 작동 원리
- Mental Model :
- Component(
Counter.js) → 사용자 인터페이스 - Store(
store.js) → 중앙 상태 관리 - Slice(
counterSlice.js) → 특정 기능별 상태 관리 - createSlice :
```javascript
createSlice({ name: "counter", initialState, reducers: { increment: (state) => state.value += 1 } })
```
- Thing 1 :
reducer생성 - Thing 2 :
increment액션 생성자 자동 생성
3. 데이터 흐름 시각화
- 사용자 클릭 시 :
increment()호출 →{ type: 'counter/increment' }생성dispatch()로 스토어 전달 →counterSlice의increment리듀서 실행- 상태 업데이트 후
useSelector로 컴포넌트 재렌더링
4. Redux Toolkit 구현 가이드
- 프로젝트 설정 :
```bash
npx create-react-app my-redux-app
npm install @reduxjs/toolkit react-redux
```
- store.js :
```javascript
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
export const store = configureStore({ reducer: { counter: counterReducer } });
```
- counterSlice.js :
```javascript
import { createSlice } from "@reduxjs/toolkit";
export const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: (state) => state.value += 1
}
});
```
5. 비동기 처리 패턴
createAsyncThunk:
```javascript
export const incrementAsync = createAsyncThunk(
"counter/fetchCount",
async (amount) => { const response = await fetchCount(amount); return response.data; }
);
```
- extraReducers :
```javascript
extraReducers: (builder) => {
builder.addCase(incrementAsync.pending, (state) => state.status = "loading");
builder.addCase(incrementAsync.fulfilled, (state, action) => state.value += action.payload);
}
```
6. 실무 팁 및 주의사항
- Immer 사용 : 불변성 유지 없이 상태 변경 가능
- DevTools 통합 : 상태 추적 및 디버깅 용이
- 비동기 처리 시 :
pending,fulfilled,rejected상태 관리 필수
결론
- Redux Toolkit으로 상태 관리 단순화 :
createSlice와configureStore사용,createAsyncThunk로 비동기 처리 - 핵심 팁 :
slice.name과reducer명의 일관된 이름 규칙, Immer 활용, DevTools 통합 - 실무 적용 :
useSelector,useDispatch로 컴포넌트 연결,extraReducers로 비동기 상태 관리