[ React ] RTK ( Redux Toolkit )

 

 

1. RTK ( Redux Toolkit )

Redux의 공식 상태관리 툴킷

Redux를 더 쉽게, 짧게, 안전하게 사용할 수 있도록 만든 공식 라이브러리

---

1.1 Redux란?

Redux는 자바스크립트 앱의 전역 상태 관리(state management)를 위한 라이브러리

- 여러 컴포넌트에서 공유해야 하는 데이터를

  하나의 중앙 저장소(store)에서 관리하도록 도와주는 도구

- 부모 → 자식 → 손자 → … 상태 전달이 너무 복잡할 때 사용

---

1.2 Redux에서 알아야 할 개념 4가지

구성 요소	설명
Store	모든 상태(state)가 저장되는 단 하나의 중앙 공간
Action	상태를 바꾸고 싶다고 알리는 신호 (객체)
Reducer	액션에 따라 상태를 어떻게 바꿀지 정의한 함수
Dispatch	액션을 리듀서에 전달하는 함수

 

흐름 ]

UI → dispatch(action) → reducer(state + action) → 새로운 state → UI 갱신

---

2.  RTK ( Redux Toolkit ) 란?

React용 Redux로 복잡했던 관리를 더욱 간단하게 처리 가능

✅ 개념 비교: Redux vs Redux Toolkit

항목	Redux (기존)	Redux Toolkit (RTK)
액션 생성	수동으로 type과 creator 작성	자동 생성됨 (slice 기반)
리듀서 작성	switch문으로 작성	함수형 reducer 자동 구성
상태 변경	불변성 수동 유지 (e.g., spread)	immer 내장 → 직접 수정처럼 작성 가능
비동기 처리	thunk 미들웨어 별도 설정	createAsyncThunk 내장
DevTools	별도 설정 필요	자동 지원됨
보일러플레이트	많음	매우 줄어듦

---

2. 1 RTK의 기능

• GraphQL/Apollo처럼 API 요청, 캐싱, 로딩 상태 관리까지 가능하게 해주는 기능
• createApi로 서버 상태 자동 관리
• 서버 중심의 상태 관리가 필요할 경우 매우 강력

기능	설명
configureStore	store를 간편하게 설정 (Redux DevTools, thunk 포함)
createSlice	reducer + action creator를 한 번에 생성
createAsyncThunk	비동기 로직도 쉽게 관리
createReducer / createAction	자유로운 커스터마이징 가능
immer 내장	상태 변경 코드를 불변성 걱정 없이 쉽게 작성 가능

---

2. 2 Provider

Context나 Redux 상태를 자식 컴포넌트에게 공급

- 최상단 레이아웃 컴포넌트 혹은 _app.tsx, layout.tsx

- Provider이 없다면 하위 컴포넌트에서 context 사용 시 오류 발생

---

3. 실습

1. Redux > store > index.tsx

• createStore란?
•  Redux에서 store를 생성하는 함수 (⚠️ 최근 Redux Toolkit 도입 이후 사용이 권장되지 않음).
• combineReducers란?
• 여러 reducer를 하나로 합치는 함수로, 여러 상태 조각을 독립적으로 관리할 수 있게 해줌.
• ReturnType<typeof rootReducer>:
  • rootReducer가 반환하는 객체 타입(전체 state 타입)을 추론하여 RootState로 정의.
  • 예: state.color.theme 이런 식으로 RootState를 통해 접근 가능.
  • 타입스크립트 유틸리티 타입 중 하나.

// index.ts
import { createStore, combineReducers } from "redux";
import colorReducer from "./color";

const rootReducer = combineReducers({
  color: colorReducer,  //color은 colorReducer에 의해 관리됨

});

export const store = createStore(rootReducer);  //npm i하니 createStore가 막히고 combineReducer toolkit 이용하기

// 타입 추론용
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;
// type 추론해서 AppDispatch로 정의

 

---

2. components > SelectColor.tsx

const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

const SelectColors = () => {
  const dispatch = useAppDispatch();
  // usAppDispatch는 useDispatch의 타입을 지정해서 만든 커스텀 훅

  const handleSetColor = useCallback(
    (color: string) => {
      dispatch(changeColor(color)); // dispatch 함수를 이용해 (action함수) 사용하기
                                    // action을 보냄으로써 Redux의 상태가 변함
    },
    [dispatch]
  );

---

3. store > colorSlice.ts

• createSlice란?
• Redux Toolkit에서 제공하는 함수로, reducer + action creator를 한번에 만들어줍니다.
• 이 코드는 아래의 세 가지 역할을 동시에 해요:
  1. state에 대한 초기값 설정
  2. reducer 함수 정의 (상태를 바꾸는 로직)
  3. 자동으로 action 함수를 만들어줌.

//////////TODO 1. state를 위한 타입 선언하기

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface ColorState {
  color: string;
  subcolor: string;
}

//////////TODO 2. slice에서 사용할 초기값 선언하기
const initialState: ColorState = {
  color: "black",
  subcolor: "purple",
};

//////////TODO 3. slice선언하기 {슬라이스이름, 초기값, reducers}
const colorSlice = createSlice({
  name: "color",
  initialState,
  reducers: {
    changeColor(state, action: PayloadAction<string>) {
      // redux에서는 state를 immer라는 불변성 객체로 유지하고 있기 때문에
      // 상태를 직접 수정해도 된다.
      state.color = action.payload;
    },
    changeSubcolor(state, action: PayloadAction<string>) {
      state.subcolor = action.payload;
    },
  },
});

//////////TODO 4. slicer가 제공하는 action함수들 export 하기
//////////redux-toolkit이 reducers 함수를 기반으로 만들어주는 action 함수
//////////reducer 이름과 동일하다.
export const { changeColor, changeSubcolor } = colorSlice.actions; // {액션} 내보내기

//////////TODO 5. reducer export 하기
export default colorSlice.reducer;

---

4. App > page.tsx

• configureStore란?
• Redux Toolkit에서 제공하는 store 생성 함수입니다.
• createStore보다 더 강력하며,
  • Redux DevTools 자동 설정
  • 미들웨어 자동 적용 (e.g. thunk)
  • 리덕스 개발 시 타입 지원 향상 등을 기본 제공합니다.
• RootState란?
• store.getState()의 반환 타입을 추론하여 RootState로 지정
• 이 타입은 useSelector에서 사용합니다.
  • 예: useSelector((state: RootState) => state.color.color)
• AppDispatch란?
• store.dispatch의 타입을 추론해서 AppDispatch로 지정
• 이 타입은 useDispatch를 커스텀 훅으로 만들 때 사용됩니다.
  • 예: const dispatch = useAppDispatch();

//////////TODO 6. configureStore로 store 선언하기

import { configureStore } from "@reduxjs/toolkit";
import colorReducer from "./colorSlice";

/*
configureStore({reducer:{ }})
*/
export const store = configureStore({
  reducer: {
    color: colorReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;