1. Reducer란?

Reducer는 JavaScript에서 상태(state)를 관리하기 위해 사용하는 함수로, 특히 Redux나 React의 useReducer Hook에서 활용됩니다.

Reducer는 아래와 같은 역할을 합니다:

• 이전 상태(state)와 액션(action)을 입력으로 받아 새로운 상태를 반환합니다.
• 상태를 변경하는 로직을 한 곳에 모아 관리합니다.

Reducer의 기본 구조

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

Reducer의 특징

• 순수 함수여야 함: 같은 입력(state, action)이 주어지면 항상 같은 결과를 반환해야 함.
• 기존 상태를 직접 수정하지 않고 새로운 상태 객체를 반환해야 함(불변성 유지).

2. Reducer가 생겨난 이유

1) 상태 관리의 복잡성 해결

컴포넌트가 많아지고 상태가 여러 곳에서 관리되다 보면 상태 변경 로직이 흩어지고 코드가 복잡해집니다. 이를 해결하기 위해 상태 변경 로직을 한 곳에 모으고 체계적으로 관리하려는 필요성이 생겼습니다. Reducer는 상태와 상태를 변경하는 로직을 한 곳에 모아 관리하게 합니다.

2) 예측 가능한 상태 관리

Reducer는 순수 함수로 작성되기 때문에, 입력(state, action)에 따라 항상 동일한 결과를 반환합니다. 이로 인해 상태 변경 과정을 예측할 수 있고, 디버깅과 테스트가 용이합니다.

3) Flux 아키텍처와 Redux의 등장

• Flux: React 생태계에서 애플리케이션 상태를 관리하기 위한 패턴으로 등장. Flux의 핵심 개념인 Action -> Dispatcher -> Store -> View 구조를 구현하는 데 Reducer가 핵심 역할을 합니다.
• Redux: Flux의 단순화된 구현체로, 상태를 한 곳에서 관리하는 store 개념과 Reducer를 통해 상태를 변경하는 방식이 도입되었습니다.

4) React와의 연계성

React는 컴포넌트 기반으로 UI를 구축하며, 컴포넌트 간 상태를 공유하고 관리해야 하는 경우가 많습니다. Reducer를 활용하면 React에서 상태 변경을 명확하게 정의하고 관리할 수 있습니다. 특히, 복잡한 상태 관리가 필요한 상황에서 유용합니다.

3. Reducer의 장점

1.	단일 책임 원칙: 상태 관리 로직이 한 곳에 집중되어 가독성과 유지보수성이 좋아짐.
2.	예측 가능성: 같은 입력에 대해 항상 같은 결과를 반환하므로 디버깅이 쉬움.
3.	불변성 유지: 기존 상태를 직접 수정하지 않고 새로운 상태를 반환하므로 버그를 예방할 수 있음.
4.	확장성: 액션을 추가하여 상태 변경 로직을 쉽게 확장 가능.

4. Reducer 사용 예시

Redux에서의 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;
  }
}

React의 useReducer Hook

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;
  }
}

결론

Reducer는 상태 관리 로직을 체계적으로 관리하기 위해 등장했으며, React와 Redux 환경에서 상태를 예측 가능하고 유지보수하기 쉽게 만들어주는 중요한 개념입니다. 복잡한 상태 관리가 필요한 프로젝트에서 특히 유용합니다.