<aside> 1️⃣ 얕은 복사는 객체나 배열을 복사할 때 참조값(주소값)을 복사하는 것을 의미합니다. 이것은 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터의 값을 공유한다는 것을 의미하므로 이로 인해 한 객체나 배열을 수정하면 다른 객체나 배열도 영향을 받을 수 있습니다.
</aside>
<aside> 2️⃣ 깊은 복사는 객체나 배열을 복사할 때 실제 값들을 새로운 메모리 공간에 복사하는 것을 의미합니다. 복사된 객체나 배열은 완전히 독립적인 메모리를 차지하게 되어 원본 객체나 배열과는 별개로 동작합니다. 따라서 한 객체나 배열을 수정해도 다른 객체나 배열은 영향을 받지 않습니다.
</aside>
<aside> 3️⃣ 따라서, 깊은 복사는 데이터 자체를 복사하여 독립적인 복사본을 생성하는 반면, 얕은 복사는 참조값을 복사하여 원본과 복사본이 동일한 데이터를 참조하게 됩니다.
</aside>
복사는 어떤 데이터 타입인지에 따라 다르게 진행되기 때문에, 얉은 복사와 깊은 복사의 더 깊은 이해를 위해서는 먼저 데이터 타입에 대한 이해를 하면 좋습니다. (원시값, 참조값의 특성)
얕은 복사, 깊은 복사를 쓰는이유
→ 원본 값이 변화될 수 있다. (혹은 독립적인 카피가 필요할 경우)
//얕은 복사
const obj = { a: 1 };
const copyObj = obj;
copyObj.a = 2;
console.log(obj.a); // 2, 원본 데이터에 영향을 준다.
console.log(obj === copyObj); // true
//깊은 복사(1depth한정)
const obj = {
a: 1,
b: { c: 2 }, //중첩 객체
}
const copyObj = Object.assign({}, obj);
copyObj.b.c = 3;
console.log(obj); // { a: 1, b: { c: 3 } } -> 2depth부턴 얕은 복사가 됨.
console.log(obj.b.c === copyObj.b.c); // true
이렇게 참조 값만을 복사하게되는 것은 원치않는 결과를 가져올 수 있기 때문에, 상황에 따라 얉은 복사와 깊은 복사를 사용할 줄 알아야한다. 얉은 복사와 깊은 복사는 참조 값이 아닌 값 자체를 복사하기 위함이다. (블로그마다 얕은 복사에 속하는 복사법들*(Object.assign(), 전개 연산자 등)*을 깊은 복사에 분류 해놓기도 하는데, 그것은 1depth 한정 깊은 복사이다.)
*얕은 복사와 깊은 복사의 선택은 데이터 구조의 복잡도와 성능 요구 사항에 따라 달라질 수 있습니다. 데이터 구조에 대한 이해와 상황에 맞는 선택이 중요합니다.
참조
얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)
추가자료
비전공자용 자바스크립트 deep copy, shallow copy 설명, 큰돌
state가 array/object면, 코딩애플