처음 만난 리덕스 (Redux) 문서
2.2 Immutability
지금부터 살펴볼 내용은 바로 Immutability입니다.
이것은 Redux가 갖고 있는 하나의 성질입니다.
immutability이라는 단어에 대해서 이해하기 위해서, 먼저 immutable이라는 단어의 의미에 대해서 알아보도록 하겠습니다.
im + mutable = immutable
immutable이라는 단어가 조금 어렵게 느껴질 수도 있는데, 먼저 mutable이라는 영어 단어는 변할 수 있는이라는 뜻을 갖고 있습니다.
여기에 부정의 의미를 가진 im을 앞에 붙이면 변경할 수 없는, 불변의라는 뜻을 가진 단어 immutable이 됩니다.
possible과 impossible을 떠올리면 im의 부정의 의미를 가진다는 것을 쉽게 기억할 수 있습니다.
그리고 같은 맥락으로 immutability라는 단어는 불변성이라는 뜻을 갖고 있습니다.
불변성은 말 그대로 변하지 않는 성질을 의미합니다.
그렇다면 Redux에서 어떤 것이 이 변하지 않는 성질을 갖고 있을까요?
앞에 나왔던 Redux의 세 가지 원칙을 다시 한 번 살펴보겠습니다.
여기서 두 번째 원칙은 State is read-only 였고, 세 번째 원칙은 Changes are made with pure functions 였습니다.
State. 즉, Redux의 데이터는 읽기 전용이며 맘대로 바꿀 수 없으며, State의 변화는 Pure function을 통해 이뤄져야 한다는 원칙이었죠.
여기에 불변성. 바로 immutability가 적용됩니다.
Redux State는 읽기 전용이며, State를 변경하기 위해서는 새로운 State를 생성해야 합니다.
그리고 새로운 State를 생성하는 과정은 Reducer라고 부르는 Pure function을 통해 이뤄집니다.
Reducer의 작동 방식을 나타낸 이 그림처럼, Reducer는 이전 상태에 정해진 어떤 변화를 준 뒤에 다음 상태를 리턴하게 됩니다.
이 과정에서 Pure function처럼 작동한다는 것은, 입력으로 받은 이전 상태를 직접 변경하는 것이 아니라 새로운 상태 객체를 만들어서 리턴한다는 것이며, 또한 같은 입력에 대해서는 항상 같은 결과를 리턴한다는 뜻입니다.
입력으로 받은 이전 상태를 변경할 수 없으며, 출력으로 만든 새로운 상태 또한 생성 이후에는 변경할 수 없다는 점에서 불변성이 여기에 적용됩니다.
정리하면 Redux State 생성 후에는 값을 바꿀 수 없다는 것입니다.
그리고 값을 바꾸기 위해서는 기존 State를 변경하는 것이 아닌, 새로운 State를 생성해야 한다는 것입니다.
JavaScript에서 이러한 불변성을 적용하기 위해서 사용하는 라이브러리가 있는데, 바로 immer입니다.
Immer의 정식 명칭은 Immer.js이며, state에 불변성을 적용하기 편리하게 도와주는 도구라고 생각하면 됩니다.
Redux를 사용할 때, 우리가 별도로 Immer를 사용할 필요는 없지만, Redux의 세 가지 원칙에 따라 불변성을 잘 지켜서 개발할 필요가 있습니다.
그러한 불변성을 지키는 것이 어렵다면, 이 immer를 사용하면 조금 더 편리하게 불변성을 지킬 수 있습니다.
그리고 뒤에서 배우게 될 Redux Toolkit은 불변성을 지키기 위해, 내부적으로 immer를 사용하고 있습니다.
Redux에서의 불변성이 가지는 의미에 대해서 잘 기억하면서 다음으로 넘어가도록 하겠습니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.