Redux Toolkit(RTK)이 고전 Redux보다 제공하는 것은 무엇인가요?

Question

Accepted Answer

**Redux Toolkit(RTK)**은 오늘날 Redux를 작성하는 공식 권장 방법입니다. 고전 Redux의 악명 높은 보일러플레이트 — 수동 action 타입, action creator, immutable 갱신 로직, store 설정 — 를 제거하면서 동일한 핵심 원칙을 유지합니다.

## RTK가 해결하는 보일러플레이트 문제

```js
// ❌ 고전 Redux — 장황함: action 타입, creator, switch reducer, 수동 immutability
const INCREMENT = "counter/increment";
const increment = () => ({ type: INCREMENT });
function reducer(state = { value: 0 }, action) {
  switch (action.type) {
    case INCREMENT: return { ...state, value: state.value + 1 };
    default: return state;
  }
}
```

## RTK: createSlice가 전부 처리함

```js
import { createSlice, configureStore } from "@reduxjs/toolkit";

export const { increment, incrementBy } = counterSlice.actions; // action creator 자동 생성
const store = configureStore({ reducer: { counter: counterSlice.reducer } });
```

`createSlice`는 action 타입과 creator를 자동 생성하고, **Immer**를 통해 안전하게 immutable 갱신으로 변환되는 "변경"하는 reducer 코드를 작성하게 해줍니다. 간결한 slice 하나가 모든 수동 조각을 대체합니다.

## RTK가 포함하는 그 외의 것

```text
configureStore   → DevTools + thunk 미들웨어가 사전 구성된 store 설정
createAsyncThunk → 데이터 가져오기를 위한 표준 비동기(pending/fulfilled/rejected action)
createEntityAdapter → 컬렉션을 위한 정규화 state + CRUD reducer
RTK Query        → 완전한 데이터 가져오기/캐싱 계층(React Query와 유사, Redux에 내장)
```

## createAsyncThunk 예시

```js
export const fetchUsers = createAsyncThunk("users/fetch", () => api.getUsers());
// users/fetch/pending | fulfilled | rejected를 자동 dispatch — extraReducers에서 처리
```

## RTK가 지금 표준인 이유

```text
✓ 고전 Redux보다 코드 약 75% 감소
✓ Immer → 수동 immutable 스프레드 로직 불필요(버그 감소)
✓ 좋은 기본값(DevTools, thunk) 기본 제공
✓ 모범 사례 장려(slice, 정규화된 데이터)
✓ RTK Query가 server-state 관리를 함께 묶음
```

## 왜 중요한가

고전 Redux의 가장 큰 비판은 보일러플레이트였고, RTK가 이를 직접 해결합니다. 그것이 RTK가 이제 **공식 권장 사항**이며 현대 코드베이스에서 "Redux를 쓴다"는 것이 의미하는 바인 이유입니다.

`createSlice`(Immer 기반, 자동 생성 action), `createAsyncThunk`(비동기), `createEntityAdapter`(정규화), RTK Query(server state)를 이해하는 것은 현대 Redux 작업에 필수적입니다 — Redux의 예측 가능성을 보존하면서, 많은 팀이 대안으로 떠나게 만든 격식을 제거합니다.