Redux 기초 개념 정리(3/4) - Reducer

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

지난 글에 이어 이번 글에서는 Redux의 Reducer에 대해서 알아보도록 하겠습니다.

---

먼저 Reducer는 단어 자체가 생소한 분들이 많을 것입니다.

비슷한 단어로 JavaScript의 배열에 존재하는 reduce함수를 떠올리시는 분도 있을 거라고 생각합니다.

reduce라는 영어 단어는 '줄이다', '축소하다' 라는 뜻을 갖고 있습니다.

비슷한 맥락으로 Reducer는 뭔가를 축소시키는 주체를 의미한다고 볼 수 있겠죠.

 

Redux에서 Reducer는 Action들을 실제로 실행하는 역할을 하는 함수를 의미합니다.

Reducer는 아래와 같은 순서대로 Action을 처리하게 됩니다.

1. 현재 Redux Store의 state와 Action 객체를 파라미터로 받아서,
2. Action 객체에 들어있는 데이터를 기반으로 state에 어떤 변화를 준 뒤에,
3. 새로운 state객체를 리턴합니다.

다시 말하면, Redux의 Reducer는 아래와 같은 역할을 한다고 볼 수 있습니다.

(state, action) => newState

 

Reducer의 개념이 이해하기 어려운 분들이 많이 계실텐데,

쉽게 말하자면 어떤 Action이 발생하면 그걸 처리하는 역할을 하는 것이라고 생각하면 됩니다.

 

앞 글에서 나왔던 Counter 애플리케이션을 예로 들면,

카운트 수를 올리거나 내리는 Action을 처리하는 역할을 하는 함수가 바로 Reducer인 것이죠.

각각의 Action에 따라서 state에 다른 변화를 주어야 하기 때문에,

보통은 Action의 갯수와 동일한 갯수로 Reducer를 만들게 됩니다.

---

다음 글에서 이어서 Redux의 기초 개념들을 살펴보도록 하겠습니다.

감사합니다.