[React] JavaScript 객체와 불변성이란, 얕은 복사와 깊은 복사

JavaScript 객체와 불변성이란 ?

불변 객체를 만드는 방법

불변(immutability)이란 뭘까 단어에서 유추해볼 수 있다시피 '변하지 않는' 뜻이라고 생각하면 되겠다.
그럼 '불변 객체'란? '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.
JS에는 불변 객체로 만들 수 있는 방법으로 기본적으로 const 와 Object.freeze() 가 있다.

const + Object.freeze

객체를 const로 선언할 경우 선언한 변수의 재할당은 허용하지 않지만 객체의 속성을 변경하는 것을 가능했다. 그리고 Object.freeze는 객체의 속성을 변경하는 것은 불가능하지만 재할당은 가능하다.
우리가 원하는 Immutable한 객체를 생성하기 위해서는 const와 Object.freeze를 함께 사용하면 된다.

const truth = {
	'dogIs': 'Cute'
};
Object.freeze(truth);
 

위 코드는 "강아지는 귀엽다" 라는 절대 불변의 진리(?)를 truth라는 객체의 속성으로 등록했다. 그리고 해당 truth 객체를 Object.freeze를 통해 동결된 객체로 만들었다.그리고 해당 객체는 아래와 같이 재할당과 속성 변경이 불가능한 Immutable한 객체가 되었다.

truth.dogIs = 'Not Cute';
truth = {'catIs': 'Pretty'}; // Uncaught TypeError: Assignment to constant variable.
concole.log(truth); // {'dogIs': 'Cute'} // Not Modified

얕은 복사와 깊은 복사

결론부터 말하자면 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니

• 얕은 복사(shallow copy)
  데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결국 한 데이터를 공유하는 것이다.

• 깊은 복사(deep copy)
  독립적인 메모리에 값 자체를 할당하여 생성하는 것

참고
참고2