처음 만난 리덕스 (Redux) 문서
5.1 Reducer
앞에 나온 Store나 Action 같은 단어들은 그래도 조금 익숙할텐데 Reducer라는 단어는 조금 생소할 수 있습니다.
먼저 영어 단어 Reduce는 줄이다, 축소하다 라는 뜻을 갖고 있습니다.
그렇다면 Reduce 뒤에 r을 붙인 단어 Reducer는, 축소하는 역할을 하는 것이라고 해석해볼 수 있습니다.
직역하면 이런 의미를 가지지만, 실제 컴퓨터 프로그래밍 분야에서 Reduce라고 하면 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정이라는 의미를 갖고 있습니다.
그리고 Reducer는 이러한 역할을 실제로 수행하는 함수를 의미합니다.
그리고 Redux의 구성 요소로써의 Reducer는 Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수입니다.
이전 강의에서 Action은 Redux State에 변화를 주기위한 행동이라고 했었죠.
그래서 결국 Reducer가 하는 역할은 Redux State에 변화를 주는 역할이라고 할 수 있습니다.
(state, action) => newState
그 과정에서 Reducer는 현재 State와 Action을 파라미터로 받아서, State에 어떤 변화를 준 뒤에 새로운 State를 만들어 리턴하게 됩니다.
이때, 앞에서 배운 불변성의 원칙에 따라서 현재 state의 값을 바꾸는 것이 아니라, 현재 state를 기반으로 새로운 state를 만들어서 리턴한다는 점을 꼭 기억하시기 바랍니다.
그럼 실제 Redux Reducer 코드를 한 번 살펴볼까요?
function appReducer(state = initialState, action) {
switch (action.type) {
case 'PUSH_ITEM':
return [...state, action.item];
case 'POP_ITEM':
const newState = [...state];
newState.pop();
return newState;
default:
return state;
}
}
이 코드는 배열에 아이템을 넣고 빼기 위한 Action을 처리하는 Reducer 함수 입니다.
보시는 것처럼 Reducer는 단순한 JavaScript 함수라는 것을 알 수 있습니다.
그리고 파라미터로는 현재 state와 action을 받게 됩니다.
여기서 파라미터의 기본값을 넣기 위해 ES6의 문법을 사용해서 initialState를 넣어주는 것도 볼 수 있습니다. state가 없다면 사전에 정의된 initialState가 기본값으로 들어가게 되는 것이죠.
이후 action 객체에 필수적으로 포함되어 있는 type이라는 값에 따라서, 상태에 정해진 변화를 준 뒤에 새로운 상태를 생성해서 리턴하게 됩니다.
예를 들어, PUSH_ITEM Action의 경우에는 배열의 가장 마지막에 새로운 아이템을 추가하여 리턴하고, POP_ITEM Action의 경우에는 배열의 가장 마지막에서 아이템을 하나 제거하고 리턴하게 됩니다.
여기서 중요한 점은 파라미터로 받은 state를 변화시키는 것이 아니라, 항상 새로운 state를 생성해서 리턴한다는 점입니다.
이것은 앞에서 배운 Redux의 세 가지 원칙 중에서 immutability. 즉, 불변성과 관련이 있는 원칙에 해당되는 부분입니다.
두 번째 원칙인 State is read-only, 그리고 세 번째 원칙인 Changes are made with pure functions에 해당되는 것이죠.
상태값은 읽기 전용이며 맘대로 바꿀 수 없으며, 상태의 변화는 모두 pure function을 통해 이뤄져야 한다는 것입니다.
그리고 이렇게 상태의 변화를 일으키는 pure function이 바로 우리가 지금 배우고 있는 Reducer입니다.
그래서 Reducer에서는 파라미터로 받은 상태값을 바꾸는 것이 아닌, 새로운 State를 생성해서 리턴하는 것입니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.