[React] Redux 개념 및 역할, 파일 구조 디렉토링

개발을 처음 진행할 때는 리덕스 내용을 한 파일에다가 모아두다가,

인턴 하면서 디렉토링 하는 방법을 배웠었는데 또 써먹을 일이 생겨 기록해둔다.

---

 

Redux는 애플리케이션의 상태를 한곳에서 관리하는 라이브러리이다.

여러 컴포넌트에서 같은 데이터를 공유할 때 유용하다.

 

1️⃣  Redux 파일 구조 (in React typescript)

 

/redux
  /actions         # 액션 정의 (이벤트 발생 시 필요한 데이터 정의)
    categoryActions.ts
  /reducers        # 리듀서 정의 (상태가 어떻게 변경될지 결정)
    categoryReducer.ts
  store.ts           # 스토어 설정 (전체 상태 관리)

 

각 파일은 Redux의 핵심 요소인 액션(Actions), 리듀서(Reducers), 스토어(Store)를 담당한다.

 

---

2️⃣  파일별 역할

📌  redux/actions/categoryActions.ts

 

Redux에서 상태를 변경하려면 "액션(Action)"이 필요하다.

액션은 어떤 상태를 변경할 것인지 알려주는 "메시지" 역할을 한다.

 

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

export const setCategories = createAction<string[]>("SET_CATEGORIES");

 

✅ setCategories는 카테고리 리스트를 변경하는 액션을 생성하는 함수이다.
✅ "SET_CATEGORIES"라는 타입을 가진 액션을 만들고, string[] 데이터를 전달할 수 있다.

 

---

📌  redux/reducers/categoryReducer.ts

 

Reducer는 액션을 받아서 상태를 실제로 변경하는 역할을 한다.

 

import { createReducer } from "@reduxjs/toolkit";
import { setCategories } from "../actions/categoryActions";

interface CategoryState {
  categoryList: string[];
}

const initialState: CategoryState = {
  categoryList: [],
};

const categoryReducer = createReducer(initialState, (builder) => {
  builder.addCase(setCategories, (state, action) => {
    state.categoryList = action.payload;
  });
});

export default categoryReducer;

 

✅ initialState: 초기 상태 값 (categoryList 배열)
✅ createReducer: setCategories 액션이 호출되면 categoryList를 변경
✅ action.payload: 액션이 전달한 데이터 (string[])

 

---

📌  store.ts

 

스토어(Store)는 Redux의 중앙 저장소이다. 모든 상태와 리듀서를 모아서 관리한다.

 

import { configureStore } from "@reduxjs/toolkit";
import categoryReducer from "./reducers/categoryReducer";

const store = configureStore({
  reducer: {
    category: categoryReducer, // 상태 이름을 category로 설정
  },
});

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

export default store;

 

✅ configureStore: 여러 리듀서를 합쳐서 Redux 스토어를 생성
✅ RootState: Redux 상태의 타입 정의
✅ store.dispatch: 액션을 Redux에 전달하는 함수

 

---

3️⃣ Redux 변수 작동 방식

1. 컴포넌트에서 dispatch(setCategories([...]) 실행
   • 새로운 카테고리 리스트를 Redux에 전달
2. Reducer가 setCategories 액션을 감지하고 state.categoryList 변경
   • categoryList가 새로운 데이터로 업데이트됨
3. 컴포넌트에서 useSelector(state => state.category.categoryList)로 상태 가져오기
   • 변경된 상태를 컴포넌트에서 사용 가능

 

---

4️⃣  Redux 변수를 사용하는 방법

 

Redux의 상태를 React 컴포넌트에서 사용하려면 useSelector와useDispatch를 활용해야 한다.

 

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCategories } from "../redux/actions/categoryActions";
import { RootState } from "./redux/store";

const CategoryComponent: React.FC = () => {
  const dispatch = useDispatch();
  const categoryList = useSelector((state: RootState) => state.category.categoryList);

  const updateCategories = () => {
    dispatch(setCategories(["Food", "Electronics", "Clothing"]));
  };

  return (
    <div>
      <h1>Categories</h1>
      <ul>
        {categoryList.map((category, index) => (
          <li key={index}>{category}</li>
        ))}
      </ul>
      <button onClick={updateCategories}>Update Categories</button>
    </div>
  );
};

export default CategoryComponent;

 

✅ useSelector를 사용해 Redux 상태(categoryList)를 가져온다.
✅ useDispatch를 사용해 setCategories 액션을 호출하고 상태를 업데이트한다.
✅ 버튼을 클릭하면 카테고리 리스트가 변경된다.