📘 리액트 강의 10편 - Redux Toolkit으로 전역 상태 관리하기

 

리액트의 useState, useContext만으로도 상태 관리는 가능하지만,
규모가 커지면 복잡도도 같이 폭발합니다.
그래서 실무에서는 전역 상태 관리 도구인 Redux를 많이 사용하며,
최근에는 Redux Toolkit이 표준처럼 사용되고 있습니다.

---

1. Redux Toolkit이란?

• Redux를 더 간결하고 쉽게 사용하도록 만든 공식 툴킷
• store, slice, dispatch 개념을 중심으로 구성
• 복잡했던 boilerplate 코드들을 최소화

---

2. 설치하기

npm install @reduxjs/toolkit react-redux

---

3. 폴더 구조 예시

src/
├── app/
│   └── store.js
├── features/
│   └── counter/
│       ├── counterSlice.js
├── App.js

---

4. 예제: 숫자 카운터 만들기

---

📄 app/store.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

---

📄 features/counter/counterSlice.js

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

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

---

📄 index.js (store 연결)

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

---

📄 App.js

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./features/counter/counterSlice";

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Redux 카운터</h1>
      <h2>{count}</h2>
      <button onClick={() => dispatch(increment())}>+ 증가</button>
      <button onClick={() => dispatch(decrement())}>- 감소</button>
    </div>
  );
}

export default App;

---

5. 핵심 요약

개념 설명

store	앱 전체의 상태 트리
slice	상태 조각과 액션 정의
dispatch()	액션을 발생시키는 함수
useSelector()	상태 읽기
useDispatch()	액션 보내기