📌 TIL (Today I Learned) - Redux & RTK 정리

Redux란?

Redux는 상태 관리 라이브러리로, 컴포넌트 간 상태를 전역적으로 관리할 수 있도록 도와준다.
• store: 전체 상태를 관리하는 저장소
• action: 상태를 변경하기 위한 객체
• reducer: 상태를 변경하는 로직을 가진 함수
• dispatch: 액션을 발생시키는 함수
• useSelector(), useDispatch(): React 컴포넌트에서 Redux 상태를 가져오거나 변경하는 Hook

TodoList 만들기

✅ 기본 설정

import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./reducers";
const store = createStore(rootReducer);
function App() {
  return (
    <Provider store={store}>
      <TodoList />
    </Provider>
  );
}

✅ 액션 & 리듀서 설정

const ADD_TODO = "ADD_TODO";
const REMOVE_TODO = "REMOVE_TODO";
export const addTodo = (text) => ({ type: ADD_TODO, text });
export const removeTodo = (id) => ({ type: REMOVE_TODO, id });
const initialState = { todos: [] };
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return { ...state, todos: [...state.todos, { id: Date.now(), text: action.text }] };
    case REMOVE_TODO:
      return { ...state, todos: state.todos.filter((todo) => todo.id !== action.id) };
    default:
      return state;
  }
}

✅ Redux를 활용한 Todo 컴포넌트

import { useSelector, useDispatch } from "react-redux";
import { addTodo, removeTodo } from "../redux/todoSlice";
import { useState } from "react";
function TodoList() {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();
  const [text, setText] = useState("");
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => dispatch(addTodo(text))}>추가</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => dispatch(removeTodo(todo.id))}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

✅ 배운 점
• Redux의 기초 개념과 동작 방식 이해
• useSelector로 상태 조회, useDispatch로 액션을 전달하는 방식 학습
• 전역 상태를 활용해 부모-자식 간 props 전달 없이 상태 공유

Redux Toolkit (RTK)

✅ RTK란?
Redux를 쉽게 사용할 수 있도록 도와주는 Redux 공식 툴킷.
기존 Redux의 복잡한 보일러플레이트 코드를 줄이고 더 직관적인 API 제공.

✅ RTK 주요 개념
1. configureStore() → createStore보다 더 간편한 설정
2. createSlice() → 액션 & 리듀서 코드 자동 생성
3. useSelector() & useDispatch() → 상태 조회 및 업데이트

✅ RTK로 TodoList 만들기

✔ RTK 방식으로 todoSlice.jsx 작성

import { createSlice } from "@reduxjs/toolkit";
const todoSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ id: Date.now(), text: action.payload });
    },
    removeTodo: (state, action) => {
      return state.filter((todo) => todo.id !== action.payload);
    },
  },
});
export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

✔ store 설정

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./todoSlice";
const store = configureStore({
  reducer: { todos: todoReducer },
});
export default store;

✔ RTK 기반 TodoList 컴포넌트

import { useSelector, useDispatch } from "react-redux";
import { addTodo, removeTodo } from "../redux/todoSlice";
import { useState } from "react";
function TodoList() {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();
  const [text, setText] = useState("");
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => dispatch(addTodo(text))}>추가</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => dispatch(removeTodo(todo.id))}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

✔ 배운 점
• createSlice()를 활용하면 액션 & 리듀서 코드가 훨씬 간결해짐
• configureStore()를 사용하면 자동으로 Redux DevTools가 설정됨
• 기존 Redux보다 RTK가 훨씬 직관적이고 사용하기 쉬움

RTK 기반 TodoList 개선

✅ RTK의 immer 활용
RTK의 createSlice() 내부에서 불변성을 자동으로 관리해줌.
기존 Redux처럼 spread 연산자를 사용하지 않아도 됨.
✔ 기존 Redux 방식

case ADD_TODO:
  return { ...state, todos: [...state.todos, { id: action.id, text: action.text }] };

✔ RTK 방식 (불변성 자동 관리)

addTodo: (state, action) => {
  state.push({ id: Date.now(), text: action.payload });
},

✅ 비동기 처리 - createAsyncThunk
RTK에서는 createAsyncThunk를 사용하면 비동기 액션을 쉽게 관리할 수 있음
예를 들어, 서버에서 할 일 목록을 가져오는 API 호출을 적용할 수 있음.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
export const fetchTodos = createAsyncThunk("todos/fetchTodos", async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  return response.json();
});
const todoSlice = createSlice({
  name: "todos",
  initialState: { items: [], status: "idle" },
  reducers: {
    addTodo: (state, action) => {
      state.items.push({ id: Date.now(), text: action.payload });
    },
    removeTodo: (state, action) => {
      state.items = state.items.filter((todo) => todo.id !== action.payload);
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchTodos.fulfilled, (state, action) => {
      state.items = action.payload;
      state.status = "success";
    });
  },
});
export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

✔ 배운 점
• createAsyncThunk를 사용하면 Redux에서 API 요청을 쉽게 관리할 수 있음.
• 기존 Redux보다 코드가 훨씬 간결해짐.
• RTK가 상태 관리의 필수 라이브러리로 자리 잡는 이유를 이해하게 됨 .