☁️ goormTIL | React #32

매루·2025년 10월 24일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

30/67

📅 2025-10-24

➡️ React Redux Toolkit에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

🔎 학습 리마인드

📌 Redux Toolkit

💡 RTK

기존의 Redux를 더 적은 코드로 더 일관되게 쓰게 해주는 공식 추천 도구 모음

설치

npm i react-redux @reduxjs/toolkit

💡 Redux vs. RTK 비교

기존 Redux

// Action value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

// Action Creator
export const addNumber = (payload) => ({ type: ADD_NUMBER, payload });
export const minusNumber = (payload) => ({ type: MINUS_NUMBER, payload });

// Initial State
const initialState = { number: 0 };

// Reducer
export default function counter(state = initialState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { number: state.number + action.payload };
    case MINUS_NUMBER:
      return { number: state.number - action.payload };
    default:
      return state;
  }
}

RTK 버전

// src/redux/slices/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    // Immer 기반: state를 직접 변이하는 형태로 써도 불변성이 보장됨
    addNumber(state, action) {
      state.number += action.payload;
    },
    minusNumber(state, action) {
      state.number -= action.payload;
    },
  },
});

 // 액션 크리에이터 자동 생성
export const { addNumber, minusNumber } = counterSlice.actions;
  // 리듀서 기본 내보내기
export default counterSlice.reducer;

항목	기존 Redux	Redux Toolkit
Action Value	직접 작성	자동 생성
Action Creator	직접 작성	자동 생성
Reducer	switch문 작성	reducers 객체로 간단히 정의
불변성 관리	직접 처리	자동 처리 (Immer 내장)

💡 Slice란?

Redux Toolkit의 핵심 단위로, Action + Reducer + Action Creator를 하나로 묶은 개념
createSlice() 함수로 생성하며, 인자에 name, initialState, reducers를 전달

const slice = createSlice({
  name: "example",
  initialState: {},
  reducers: {
    someAction(state, action) {
      // Reducer 로직 + Action Creator 자동 생성
    },
  },
});

💡 configStore 비교

일반 Redux

import { createStore, combineReducers } from "redux";
import counter from "../modules/counter";

const rootReducer = combineReducers({ counter });
const store = createStore(rootReducer);
export default store;

RTK

// src/redux/config/configStore.js

import { configureStore } from "@reduxjs/toolkit";
/**
 * import 해온 것은 slice.reducer 입니다.
 */
import counter from "../slices/counterSlice";
import todos from "../slices/todosSlice";

/**
 * 모듈(Slice)이 여러개인 경우
 * 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 함
 *
 * 아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
 * 이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것
 */
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

💡 Redux의 세 가지 원칙

Single Source of Truth
- 모든 상태는 하나의 Store에 저장됨
State is Read-Only
- 상태는 직접 변경할 수 없으며, 반드시 Action을 통해 변경됨
Changes are Made with Pure Functions
- 상태 변화는 순수 함수인 Reducer를 통해 이루어져야 함

📌 Flux 패턴

Flux는 Facebook에 의해 개발된 애플리케이션 아키텍처로, 주로 React와 함께 사용되며, 데이터의 단방향 흐름을 중심으로 설계됨

데이터 흐름 (단방향)
```
Action → Dispatcher → Store → View → (다시 Action 발생)
```
- 이렇게 관리되는 순환적인 흐름은 애플리케이션의 데이터 흐름을 예측 가능하게 만들어, 복잡한 상호작용이 많은 대규모 애플리케이션을 쉽게 관리할 수 있게 함

💡 주요 구성 요소

구성 요소	역할
Action	상태 변화를 일으키는 단순 객체 (사용자 행동 표현)
Dispatcher	모든 액션을 중앙에서 받아 스토어로 전달하는 허브
Store	상태(state)와 로직을 관리하며, 뷰에 변경 알림
View (React Components)	Store의 상태를 구독하고, UI를 렌더링

💡 Ducks 패턴과 Flux 패턴

비교 항목	Ducks 패턴	Flux 패턴
초점	코드 구조 단순화	데이터 흐름 구조화
특징	Redux 모듈을 한 파일로 묶음 (action + reducer 등)	단방향 데이터 흐름을 강제