지금부터는 Reducer에서 지켜야 할 규칙들에 대해서 알아보도록 하겠습니다.
먼저 첫 번째 규칙은 아래와 같습니다.
“Only calculate the new state value based on the state and action arguments.”
새로운 state는 파라미터로 받은 현재 state와 action객체를 기반으로 생성해야 한다는 것입니다.
외부에 다른 값을 참조해서 state에 변화를 주는 것이 아니라, 오로지 현재 state와 action객체에 들어있는 값만으로 새로운 state를 만들어야 한다는 것입니다.
앞에서 Reducer는 pure function이어야 한다고 했는데, Pure function이 되려면 같은 입력값에 대해서 항상 같은 결과를 보여주어야 합니다.
즉, Reducer의 첫 번째 규칙은 같은 입력값이 들어오면 항상 같은 결과를 보여주기 위한 규칙이라고 할 수 있습니다.
그리고 Reducer의 두 번째 규칙은 아래와 같습니다.
“Not allowed to modify the existing state. Instead, make immutable updates.”
이 규칙은 현재 state를 조작할 수 없으며, 새로운 state를 만들어 immutable update를 해야 한다는 뜻입니다.
Reducer가 pure function이 되기 위해서 입력으로 들어온 현재 state를 조작하면 안되고, 새로운 state를 생성하는 형태의 immutable update를 해야 한다는 것이죠.
immutable update에 대해서는 뒤에서 조금 더 자세히 배우도록 하겠습니다.
그리고 Reducer의 마지막 세 번째 규칙은 아래와 같습니다.
“Not do any asynchronous logic or other 'side effects'.”
이 규칙은 비동기 로직이나 side effects는 허용되지 않는다는 것인데, 예를 들면, Reducer 내에서 서버와 통신을 해서 데이터를 받아오거나 하는 등의 동작을 하면 안 된다는 것입니다.
여기서 side effects라는 것은 Reducer 외부에서 보여질 수 있는 상태의 변경 또는 동작을 의미합니다.
예를 들면, 콘솔에 로그를 출력하거나 파일을 저장하는 등의 동작을 의미합니다.
Pure function에서 리턴 값과 직접적으로 관련이 없는 모든 동작은 side effect라고 생각하시면 됩니다.
이러한 side effects를 허용하지 않는 이유는, Reducer 외부와 내부를 철저하게 분리하고 리턴 값과 관련이 없는 동작들을 막음으로써 Reducer가 완벽한 pure function이 되게 하기 위함입니다.
결과적으로 지금까지 살펴본 Reducer의 세 가지 규칙은, Reducer가 pure function이 되도록 하기 위한 규칙이라고 할 수 있습니다.
그렇다면 이러한 규칙들을 잘 지켜야 하는 이유는 무엇일까요?
이러한 Reducer의 규칙의 목적을 나타내는 단어가 바로 Predictable 입니다.
Predictable은 번역하면 예측 가능한이라는 뜻을 갖고 있습니다.
Reducer에서 오로지 입력으로 받은 파라미터만을 가지고 새로운 상태 값을 생성하게 된다면, 상태 값의 변화에 대해서 예측하기가 쉬워집니다.
그리고 예측하기 쉽다는 것은, 동일한 Action이 발생했을 때 상태가 어떻게 변화할지 예측하기 쉽다는 것이고, 동시에 Reducer의 동작에 대해 명확하게 이해할 수 있기 때문에 테스트하기도 쉽다는 것이기도 합니다.
그런데 만약 Reducer가 외부의 변수들에 의존해서 새로운 상태를 생성하게 된다면,
상태값이 어떻게 변할지 예측하기가 쉽지 않습니다.
Reducer가 Action을 처리하는 시점에 외부의 변수들이 어떻게 변해있을지 모르기 때문이죠.
그리고 만약 Reducer가 입력으로 받은 값을 변경하게 된다면 예상치 못한 결과가 발생할 수 있습니다.
그래서 이런 규칙들을 잘 지켜서 state를 업데이트 하는 것이 중요합니다.
참고로 규칙을 어기게 되면, redux-devtools
같은 도구에서도 기능이 정상적으로 작동하지 않을 수 있습니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.