얕은 복사, 깊은 복사

얕은 복사에 대해 벌써 세 번 정도 글을 남깁니다..

리덕스의 불변성이 궁금할 때, useState가 어떻게 상태를 변화시키는지 궁금할 때, 그리고 오늘

얕은 복사에 대해 대충 알고 넘어갔다가 결국 면접 자리에서 이상한 대답을 한 후에 제대로 공부하게 되었습니다.

 

Javascript의 자료형은 크게 원시자료형과 참조자료형으로 나눌 수 있습니다.(검색 원시자료형, 참조자료형)

원시자료형은 고정된 저장공간을 사용하므로 변수에 데이터를 바로 저장할 수 있습니다.

반면 참조자료형은 저장공간이 유동적으로 변할 수 있다는 특징 때문에 heap이라는 메모리 공간에 저장하고

변수에는 "참조 주소 값"만 할당합니다.(heap?? 공부하기)

이 특징 때문에 얕은 복사는 참조 복사와 객체 복사라는 두 가지 특징? 경우?로 나눌 수 있습니다.

1. 참조 복사 부분을 보면 단순히 fruit객체의 참조 주소 값을 복사해서 넣었다고 볼 수 있습니다.

즉, “item과 fruit는 같은 객체다”라고 생각하는 것과 마찬가지입니다.

2. 객체 복사 부분은 spread operator를 사용해서 fruit객체의 내용물이 들어있는 새로운 객체를 만들었습니다.

그래서 item2는 새로운 참조주소값을 가집니다. item2.name을 다른 데이터로 재할당해도 fruit객체의 name은 바뀌지 않을 것입니다.

하지만 item2.판매량.우리슈퍼로 데이터를 할당하면 fruit객체의 데이터가 바뀐 모습을 볼 수 있었습니다.

즉, 데이터 모양에 따라 전개 연산자를 이용해서 새로운 객체를 만든다고 해도 얕은 복사(객체 복사)가 발생할 수 있습니다.

 

(불편하게 얕은 복사가 존재하는 이유는 효율성 때문인 것 같습니다. 객체가 얼마나 길어질지 모르는데 그 데이터를 하나하나 할당하고 비교한다면 큰 연산이 될 것입니다. 그래서 데이터의 상태변화를 감지하기 위해 얕은 복사를 이용하고 이것을 불변성을 유지한다고 말합니다. 원본 객체와 새로운 객체의 참조값을 비교하여 변화가 있다는 것을 인지할 수 있도록 원본 객체의 참조값을 유지해야 합니다. 얕은 복사를 이용해서 상태변화를 감지하기 때문입니다.)

 

단 위와 같이 얕은 복사를 일부러 이용하는 경우가 아니라면... 얕은 복사의 존재에 대해 잘 모른다면 어리둥절한 에러가 발생할 수 있습니다.

이것을 방지하려면 깊은 복사를 해야 합니다.

객체가 아주 깊다면 로다쉬의 cloneDeep 메소드를 통해 쉽게 깊은 복사를 할 수 있습니다.(단순하면 spread 연산자 쓰면 되겠죠?)

혹은 로다쉬가 너무 무거워서 꺼려진다면 단순한 알고리즘을 작성해서 깊은 복사를 할 수 있습니다.

알고리즘을 더 잘 하시는 분께서는 가르침을 주시면 감사하겠습니다..ㅠㅠ