[문법] 얕은 복사와 깊은 복사가 뭐지??

앞에 글에서 스프레드 연산자를 공부하다보니 얕은 복사라는 말이 나왔다.

 

[문법] state 사용, 스프레드 연산자

그게 뭐지?? 하고 찾아보니

스프레드 연산자의 단점이라고 할 수 있는 중첩된 객체나 배열까지는 복사되지 않는다는 것!

 

이 문제점을 해결 할 수 있는 것이 깊은 복사이다!

 

얕은 복사 vs 깊은 복사

구분얕은 복사깊은 복사

복사 수준	최상위 수준만 복사	모든 중첩 구조까지 복사
참조 공유	중첩된 객체나 배열은 원본과 참조를 공유	원본과 완전히 독립적
사용 예시	...(스프레드 연산자), Object.assign, slice	JSON.parse(JSON.stringify(obj)), lodash 등
원본 영향	중첩 객체를 수정하면 원본에도 영향을 줌	원본에 전혀 영향을 주지 않음

 

 

// 얕은 복사

let original = { x: 1, y: { z: 2 } };
let shallowCopy = { ...original };

shallowCopy.x = 100; // 복사본의 x 값 변경
console.log(original); // { x: 1, y: { z: 2 } } -> 원본에는 영향 없음

shallowCopy.y.z = 300; // 복사본의 중첩 객체 수정
console.log(original); // { x: 1, y: { z: 300 } } -> 원본에도 영향을 줌



// 깊은 복사 (JSON 방법) 

let original = { x: 1, y: { z: 2 } };
let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.y.z = 300; // 복사본의 중첩 객체 수정
console.log(original); // { x: 1, y: { z: 2 } } -> 원본은 영향 없음



// 깊은 복사2 (유틸 라이브러리 사용-> lodash 사용)

import _ from 'lodash';

let original = { x: 1, y: { z: 2 } };
let deepCopy = _.cloneDeep(original);

deepCopy.y.z = 100; // 복사본 수정
console.log(original); // { x: 1, y: { z: 2 } } -> 원본에는 영향 없음
console.log(deepCopy); // { x: 1, y: { z: 100 } } -> 복사본만 변경됨

 

lodash는 라이브러리를 사용하는 것이기 때문에 설치하여 사용해야 한다.!

설치 명령어: npm install lodash

 

 

• 간단한 경우에는 JSON 방법을 사용할 수 있지만, 복잡한 데이터 구조를 다룰 때는 Lodash가 훨씬 안전하고 유용
• Lodash를 설치하지 않고도 재귀적으로 깊은 복사를 구현할 수 있지만, 직접 구현하는 대신 검증된 라이브러리를 사용하는 것이 일반적으로 더 좋음

 

 

 

 

얕은 복사는 빠르고 간단하여 많이 쓰이지만 이런 특징을 잘 알고, 중첩 구조를 다뤄야 할 때는 깊은 복사를 사용하면 될 것 같다!