여기에서는 Redux에 대해 정리해 볼 것이다.

1. 불변성??

React, Redux에서는 불변성을 지키는게 매우 중요하다는 말을 한번쯤은 들어봤을 것이다. 여기에서 불변성이란, 컴포넌트의 상태를 직접적으로 수정하면 안되고, 기존의 상태는 불변해야 함을 의미한다.

얕은복사 vs 깊은복사

2. Why???

아니, 그래... 리액트에서 불변성을 지켜달라고 하니, 지켜야지! 그런데 왜??? 불변성을 지켜야 할까???

React 그리고 Redux에서는 shallow comparison(얕은 비교)를 통해, 상태가 변했는지, 다시 렌더돼야 하는지를 판단한다.

(참고: https://ko.reactjs.org/docs/react-component.html#setstate)

얕은비교(shallow comparison)는 무엇일까??

얕은 비교에 대해 알아보기 전에, 얕은 복사와 깊은 복사에 대해 먼저 정리하고 넘어가자.

이러한 개념은 참조타입의 자료형에 있어서만 유의미하다. 참조타입의 자료형 같은 경우, 변수에 할당 될때, 데이터 자체가 할당 되는 것이 아니라, 데이터의 참조값 혹은 주소값이 할당되게 된다.

얕은 복사의 경우, 이러한 참조타입의 자료형을 복사할 때 그 데이터까지 모두 복사해 오는 것이 아니라, 참조값만, 즉 껍데기만 얕게 복사해오는 것을 의미하며,

깊은 복사의 경우, 이와는 반대로 그 데이터 자체를 복사하여, 메모리에 새로운 참조값을 가진 아예 새로운 변수로 할당 하는 것을 의미한다.

let obj = {a: "apple", b: "banana"};
//얕은 복사
let shallowCopied = obj;
//깊은 복사
let deepCopied = {...obj};

shallowCopied.a = "arrow";
deepCopied.b = "brutal"

console.log(obj)
=> {a: "arrow", b: "banana"} 의 결과가 나온다.

위와 같은 결과는, shallowCopied는 obj와 참조값을 공유하고 있기 때문에, 어느 한쪽의 값만 바꾸더라도 서로 변경된 데이터를 공유하게 되기 때문이다. 이와 반대로, deepCopied의 경우, 아예 새로운 주소값을 할당하여 만든 새로운 객체이기 때문에, 값을 바꾼다고 하더라도, obj.b의 값은 "brutal"로 변경 되지 않는다.

다시 돌아와서, 위에서 리액트는 shallow-comparision을 이용해 상태의 변화를 체크한다고 했다.

즉, 참조값만 같다면 상태는 변하지 않았다고 생각을 하는 것이다.

달리 말하면, 참조값만 바뀐다면, 상태가 변화했다고 생각을 하는 것이다.