Redux의 State를 올바르게 사용하는 방법

 

 Redux의 올바른 State 관리법 

 

이번 게시글은 Reducer 함수에서 반환하는 State 객체에 대해 정리해보도록 하겠습니다.

 

 

Redux는 기존의 State를 대체하여 항상 새로운 State 객체를 반환합니다.

 

따라서 Reducer 함수에서 반환하는 객체는 중요하지 않지만 중요한 것은 기존 State와 병합되지 않고 기존 State를 덮어쓴다는 것입니다.

 

위의 코드와 예시 코드와 함께 살펴보겠습니다.

기존 State는 counter와 showCounter 프로퍼티를 가지고 있었지만 위와 같이 counter 필드 값만 반환되게 수정을 하면

store에 저장된 State에 병합을 하는 것이 아니라 덮어쓰기 때문에 저장된 State에서는 더 counter 필드만 남아있게 되고 showCounter는 undefined 값을 갖게 됩니다.

 

 

여기서 값을 반환하기 전에 해당 필드에 직접 접근하여 값을 바꾸고 state를 반환하면 되지 않을까 라는 의문이 들 수도 있습니다.

 

위와 같이 수정할 경우 정상적으로 작동하는 것처럼 보일 수 있지만 이것은 Redux로 작업할 때 절대 해서는 안 되는 접근 방식입니다.

 

즉 절대 기존의 직접 State를 변환해서는 안되고, 새로운 State 객체를 반환하게 해주어야 합니다.

 

 

 

또한 객체와 배열은 참조값이기 때문에 뜻하지 않게 기존의 State를 재정의하거나 변경하기 쉽습니다.

만약 위의 잘못된 접근 방식에 이어 완전히 새로운 State 객체를 반환하게 한다면 이 또한 정상적으로 작동하는 것처럼 보일 것입니다.

 

하지만 여전히 잘못된 접근 방식입니다.

 

객체와 배열은 참조값이기 때문에 여전히 기존의 State를 변형시키고 있습니다.

 

재차 강조하자면 State를 변형해서는 안됩니다.

 

이로 인해 예측 불가능한 동작이 발생할 수도 있으며 디버깅 작업에서도 어려움을 겪을 수 있고 오류가 발생하지 않더라도 State가 동기화되지 않는 예기치 못한 부작용이 생길 수 도 있습니다.