📅 2025-10-23

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

---

🔎 학습 리마인드

📌 Action

💡 Action Creator란?

• 액션 객체를 생성해주는 함수
• 매번 직접 액션 객체를 만들지 않고, 함수로 감싸 일관된 형식의 액션 생성
• 액션의 type 값은 상수로 분리하여 관리 → 자동 완성, 오타 방지 가능

// src/redux/modules/counter.js

// 액션 타입을 상수로 선언
const PLUS_ONE = "PLUS_ONE";

// Action Creator 함수 생성
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

dispatch({ type: "PLUS_ONE" });
dispatch(plusOne()); // ✅ Action Creator 사용

사용 이유

• 오타 방지
  • 문자열 직접 입력 대신 상수 사용 → 자동 완성 & 오류 예방
• 유지보수의 효율성 증가
  • 한 곳에서 수정하면 전역에 반영 가능
• 코드 가독성
  • 모듈별 액션들을 한눈에 파악 가능

💡 payload란?

• 액션 객체에 담기는 추가 데이터
• 상태 변경 시 필요한 값을 payload(전달 데이터)로 함께 전달
• Action Creator에서 매개변수로 받아 액션 객체에 포함시킴

// 예시: 특정 값만큼 증가시키기
const ADD_NUMBER = "ADD_NUMBER";

export const addNumber = (payload) => ({
  type: ADD_NUMBER,
  payload, // 전달받은 데이터 포함
});

// 사용
dispatch(addNumber(5)); // { type: "ADD_NUMBER", payload: 5 }

💡 Ducks 패턴

• Redux의 액션 타입 + 액션 생성 함수 + 리듀서를 한 파일에 모아 관리하는 구조

구조 예시

src/redux/modules/
 ├── counter.js
 ├── todos.js
 └── user.js

규칙

1. Reducer → export default

2. Action Creator → export

3. Action Type → "도메인/모듈명/ACTION_TYPE" 형식으로 작성

   (예: "todos/ADD_TODO", "counter/PLUS_ONE")

---

🔗 https://ko.redux.js.org/