얕은 복사와 깊은 복사에 관해서 설명해주세요.
얕은 복사는 객체나 배열을 복사할 때 참조값(주소값)을 복사하는 것을 의미합니다. 이것은 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터의 값을 공유한다는 것을 의미하므로 이로 인해 한 객체나 배열을 수정하면 다른 객체나 배열도 영향을 받을 수 있습니다.
깊은 복사는 객체나 배열을 복사할 때 실제 값들을 새로운 메모리 공간에 복사하는 것을 의미합니다. 복사된 객체나 배열은 완전히 독립적인 메모리를 차지하게 되어 원본 객체나 배열과는 별개로 동작합니다. 따라서 한 객체나 배열을 수정해도 다른 객체나 배열은 영향을 받지 않습니다.
따라서, 깊은 복사는 데이터 자체를 복사하여 독립적인 복사본을 생성하는 반면, 얕은 복사는 참조값을 복사하여 원본과 복사본이 동일한 데이터를 참조하게 됩니다.
얕은 복사, 깊은 복사를 쓰는이유
//얕은 복사
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
JavaScript
복사
이렇게 참조 값만을 복사하게되는 것은 원치않는 결과를 가져올 수 있기 때문에, 상황에 따라 얉은 복사와 깊은 복사를 사용할 줄 알아야한다. 얉은 복사와 깊은 복사는 참조 값이 아닌 값 자체를 복사하기 위함이다. (블로그마다 얕은 복사에 속하는 복사법들(Object.assign(), 전개 연산자 등)을 깊은 복사에 분류 해놓기도 하는데, 그것은 1depth 한정 깊은 복사이다.)
얕은 복사(Shallow Copy)
깊은 복사(Deep Copy)
원시값의 복사
얕은 복사가 중첩구조를 복사하지 못하는 이유 → spread 연산자의 작동 원리
*얕은 복사와 깊은 복사의 선택은 데이터 구조의 복잡도와 성능 요구 사항에 따라 달라질 수 있습니다. 데이터 구조에 대한 이해와 상황에 맞는 선택이 중요합니다.
참조
추가자료
state가 array/object면, 코딩애플
