React - reducer function

 리듀서 함수(reducer function)는 상태(state)와 액션(action)을 입력으로 받아 새로운 상태를 반환하는 순수 함수입니다. 이 함수는 주로 상태 관리 라이브러리인 Redux나 React의 useReducer 훅에서 사용되며, 상태 관리의 핵심적인 역할을 합니다.

 

 리듀서 함수는 두 가지 주요 입력을 받습니다.

1. 현재 상태 (state): 현재의 애플리케이션 상태를 나타내는 객체입니다.
2. 액션 (action): 상태를 변경하기 위해 발생하는 이벤트로, 주로 type과 payload로 구성됩니다. type은 어떤 종류의 상태 변경이 일어날지 설명하며, payload는 그 변경에 필요한 데이터를 담고 있습니다.

리듀서 함수는 이 두 가지 입력을 바탕으로 새로운 상태 객체를 반환합니다. 이 과정에서, 리듀서 함수는 반드시 기존의 상태를 변형하지 않고 새로운 상태를 반환해야 합니다. 예를 들어, 다음과 같은 액션이 주어진다고 가정해 보겠습니다.

{
  type: "USER_LIST",
  payload: ["User1", "User2", "User3"]
}

리듀서 함수에서는 이 액션을 받아 상태를 다음과 같이 업데이트할 수 있습니다.

const reducer = (state, action) => {
  switch (action.type) {
    case "USER_LIST":
      return {
        ...state,
        userList: action.payload,
      };
    default:
      return state;
  }
};

이렇게 리듀서 함수는 주어진 액션에 따라 상태를 어떻게 변경할지 정의하며, 이 함수는 항상 새로운 상태 객체를 반환합니다.