[React] 리듀서(reducer)

📍 리듀서(reducer)

리듀서(reducer)는 변화를 일으키는 함수로 상태(state)를 관리하는 핵심 개념 중 하나이다.

✔ 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다.

✔ 그리고 두 값을 참고해 새로운 상태를 만들어서 반환해 준다.

⇒ 즉, 현재 상태와 액션(action)을 입력받아 새로운 상태를 반환하는 순수 함수라고 할 수 있겠다.

• 리듀서 예시

// 액션 타입 상수 선언
const INCREMENT = "INCREMENT";

// 초기 상태
const initialState = {
  counter: 1
};

// 리듀서 함수
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state, // 다른 상태 유지
        counter: state.counter + 1
      };
    default:
      return state; // 상태를 변경하지 않음
  }
};

📍 리듀서 작성 시 주의사항

① 불변성 유지
상태를 직접 변경하지 않고 새로운 객체를 반환해야 함.

state.counter += 1  // ❌
counter: state.counter + 1   // ⭕

② 초기 상태를 설정
리듀서 호출 시 state가 undefined일 경우, 초기 상태를 반환해야 함.

③ 알 수 없는 액션 처리
리듀서에서 알 수 없는 액션 타입일 경우, 현재 상태를 그대로 반환해야 함.

④ 상태의 구조화
상태가 복잡할 경우 여러 리듀서를 작성하고 combineReducers로 병합하는 것이 좋음.