Redux 개념

🧠 Redux의 핵심 개념

🔁 1. Single Source of Truth (단일 상태 저장소)

Redux는 애플리케이션의 모든 상태를 하나의 객체 트리로 만들고, 이를 하나의 store에 저장합니다. 즉, 상태는 중앙 집중식으로 관리됩니다.

const store = createStore(reducer);

---

🔄 2. State는 읽기 전용 (Read-Only)

Redux에서는 상태(state)를 직접 수정하지 않습니다. 오직 action을 통해서만 상태를 변경할 수 있으며, 실제 변경은 reducer에서 처리합니다.

---

🧬 3. 상태는 순수 함수인 reducer를 통해 변경된다

reducer는 이전 상태와 action을 입력받아 새로운 상태를 반환하는 순수 함수입니다.

function reducer(state, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

---

🧩 Redux 용어 정리

---

1. 📦 Store

• Redux의 중앙 상태 저장소입니다.
• createStore()로 생성하며, 현재 상태(state), reducer, dispatch 기능을 포함합니다.

---

2. ⚡ Action

• 상태 변경을 요청하는 일반 자바스크립트 객체입니다.
• 필수 속성: type (변경의 종류를 나타냄)
• 선택 속성: payload (데이터 전달용)

const incrementAction = {
  type: 'INCREMENT',
  payload: 1 // 선택적
};

---

3. 🖱️ Event

• 일반적으로 사용자의 입력(클릭, 키보드 입력 등) 또는 네트워크 응답 등을 의미합니다.
• Redux 자체 용어는 아니며, 보통 이벤트가 발생하면 그에 따라 action을 생성합니다.

// 버튼 클릭 이벤트 → 액션 생성 → 디스패치
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>

---

4. 📤 Dispatch

• store.dispatch(action) 형태로 사용.
• 특정 액션을 스토어에 전달해서 상태 업데이트를 트리거합니다.

dispatch({ type: 'INCREMENT' });

• 디스패치된 액션은 reducer로 전달되어 상태를 변경하게 됩니다.

---

5. 🔄 Reducer

• 액션을 받아서, 이전 상태를 기반으로 새로운 상태 객체를 반환하는 순수 함수.

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

---

6. 🛠️ Middleware (선택 사항)

• 액션이 리듀서에 도달하기 전에 가로채서 작업을 수행할 수 있는 중간 단계입니다.
• 예: redux-thunk, redux-saga (비동기 처리에 자주 사용)

---

🔁 Redux 데이터 흐름 정리 (One-way data flow)

1. Event 발생 (예: 버튼 클릭)
2. → Action 생성
3. → Dispatch로 액션 전달
4. → Reducer가 상태를 변경
5. → Store의 새로운 상태가 컴포넌트에 반영됨

---

🔍 예제 (카운터)

// 1. 액션 생성자
const increment = () => ({ type: 'INCREMENT' });

// 2. 리듀서
function counter(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// 3. 스토어 생성
const store = createStore(counter);

// 4. 디스패치 (예: 버튼 클릭 시)
store.dispatch(increment());

---

📝 정리

용어	설명
Store	애플리케이션의 전체 상태를 보관하는 저장소
Action	상태 변경 요청을 나타내는 객체
Event	사용자의 입력이나 외부 자극, 액션을 발생시키는 트리거
Dispatch	액션을 스토어에 보내는 함수
Reducer	액션을 처리해 새 상태를 반환하는 순수 함수