[REACT] REDUX 총 정리 (연습다시하기)

리덕스(Redux)란?

JavaScript 애플리케이션의 상태 관리를 위한 라이브러리로, 주로 React와 함께 사용된다. 리덕스는 애플리케이션 상태를 전역적으로 관리하고 컴포넌트 간의 상태 공유를 쉽게 해준다.

 

*용어 설명*
스토어(Store): 애플리케이션의 전역 상태가 저장되는 곳. 스토어는 createStore 함수를 사용하여 생성할 수 있다.
액션(Action): 상태 변경 요청을 나타내는 객체로, 반드시 type 속성이 포함된다.
리듀서(Reducer): 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수다.
디스패치(Dispatch): 액션을 리듀서에 전달하여 상태 변경을 트리거하는 함수다.
구독(Subscribe): 스토어의 상태가 변경될 때마다 특정 콜백 함수가 실행되도록 하는 함수다.

 

---

1. Redux와 Redux Toolkit 설치

npm install @reduxjs/toolkit react-redux

 

 

2. Slice 생성하기

 

• Redux에서 slice는 특정 상태와 관련된 리듀서와 액션들을 한 곳에 모아 관리하는 단위입니다.
• createSlice 함수를 사용하여 slice를 생성합니다.
• 예시로 포켓몬 목록을 관리하는 PokemonSlice를 만들어보겠습니다.

 

(내가 전에 useCountext로 작성한 코드를 바탕으로 redux 공부를 해보았다.)

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

const PokemonSlice = createSlice({
  name: "pokemon", // slice 이름
  initialState: [], // 초기 상태 (빈 배열로 시작)
  reducers: {
    addPokemon: (state, action) => {
      // 포켓몬 추가 로직
      state.push(action.payload);
    },
    removePokemon: (state, action) => {
      // 포켓몬 제거 로직
      return state.filter((p) => p.id !== action.payload);
    },
  },
});

export const { addPokemon, removePokemon } = PokemonSlice.actions;
export default PokemonSlice.reducer;

 

3. 스토어 생성하기

 

• 스토어는 애플리케이션의 모든 전역 상태를 관리한다..스토어는 애플리케이션의 모든 전역 상태를 관리한다.
• configureStore를 사용하여 스토어를 생성하고, 방금 만든 리듀서를 연결한다.

 

// src/redux/PokemonStore.js
import { configureStore } from "@reduxjs/toolkit";
import PokemonReducer from "./PokemonSlice";

const PokemonStore = configureStore({
  reducer: {
    pokemon: PokemonReducer, // 리듀서 연결
  },
});

export default PokemonStore;

 

 

4. Provider로 전체 애플리케이션 감싸기

 

• 스토어를 React 애플리케이션에 제공하려면, Provider로 최상위 컴포넌트를 감싸야 한다.
• Provider의 store 속성에 방금 생성한 스토어를 전달된다.

 

// src/App.jsx
import { Provider } from "react-redux";
import PokemonStore from "./redux/PokemonStore";
import Home from "./Home";
import Dex from "./Dex";
import PokemonDetail from "./PokemonDetail";
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Provider store={PokemonStore}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dex" element={<Dex />} />
        <Route path="/dex/:id" element={<PokemonDetail />} />
      </Routes>
    </Provider>
  );
}

export default App;

 

 

5. Redux 상태 사용하기

• useSelector와 useDispatch 훅을 사용하여 Redux 상태를 가져오거나, 액션을 호출할 수 있다.useSelector와 useDispatch 훅을 사용하여 Redux 상태를 가져오거나, 액션을 호출할 수 있다.

상태 조회하기 (useSelector)

• useSelector 훅을 사용하면 Redux 상태를 컴포넌트에서 사용할 수 있다.

import { useSelector } from "react-redux";

function Dex() {
  const selectedPokemon = useSelector((state) => state.pokemon); // pokemon 상태 가져오기

  return (
    <div>
      {selectedPokemon.map((p) => (
        <p key={p.id}>{p.name}</p>
      ))}
    </div>
  );
}

6. 액션 디스패치하기 (useDispatch)

• useDispatch 훅을 사용하면 Redux 액션을 디스패치하여 상태를 변경할 수 있다.

import { useDispatch } from "react-redux";
import { addPokemon, removePokemon } from "./redux/PokemonSlice";

function AddPokemonButton({ pokemon }) {
  const dispatch = useDispatch();

  const handleAddPokemon = () => {
    dispatch(addPokemon(pokemon)); // addPokemon 액션 디스패치
  };

  return <button onClick={handleAddPokemon}>포켓몬 추가</button>;
}

 

 

차이점

항목	리덕스 미사용코드	리덕스 사용코드
상태관리	useState로 컴포넌트 내에서 관리	전역 스토어에서 관리, 여러 컴포넌트에서 접근 가능
상태업데이트 방법	setCount함수를 사용하여 직접 상태변경	dispatch를 사용하여 액션을 전달, 리듀서가 상태를 변경
컴포넌트 연결방식	상태가 컴포넌트 내부에 존재하므로 별도의 연결작업 필요없음	Provider로 전역스토어를 컴포넌트 트리에 연결
상태 공유와 재사용성	컴포넌트 내부에서만 상태접근가능	전역 상태 관리로 어디서든 접근 가능, 재사용성 높음

 

---

 

마치며 

Redux사용법

1. Store 설정
2. Redux Slice 생성
3. App에 Store 적용
4. 컴포넌트에서 Redux 사용