.
, []
객체 복사를 완벽하게 하는 것은 쉬운 일이 아닙니다. 객체는 실행컨텍스트에 모든 변수가 저장되지 않는 first class citizen이 아닙니다. 힙이라는 라는곳에 진짜 객체 데이터가 저장되어있고 실행컨텍스트에는 이 힙을 가르키는 주소만 들어있을 뿐이죠, 따라서 객체 안에 객체가 지정되어있는 중첩 객체는 완벽하게 복사하기 어렵습니다.
const testObjCopy = Object.assign({}, testObj)
Object.assign
함수는 앞에 인수로 받은 객체에 두번째 인수로 받은 객체를 채워 넣습니다. 그리고 그렇게 만들어진 객체를 반환하죠. 그럼 그안에 들어가 있는 모든것들이 복사가 될 까요?
const state = {
cart: [
{ product: 'bread', quantity: 5 },
{ product: 'pizza', quantity: 5 },
],
user: { loggedIn: true },
};
const stateClone = Object.assign({}, state);
const stateDeepClone = cloneDeep(state);
state.user.loggedIn = false;
console.log(stateClone); // false
console.log(stateDeepClone);// true
이렇게 state 를 얕게 복사한 stateClone의 경우 state를 수정하면 같이 수정이 되는 모습을 보이지만 stateDeepClone은 독자적인 객체로서 수정되지 않습니다.