lodash를 활용한 깊은 복사

const a = { x: { y: 1 } };
const b = { ...a }; // 얉은 복사

b.x.y = 2;

console.log(a.x.y); // 2출력

전개 연산자의 경우 얕은 복사에 해당하기 때문에 1차원의 참조형 데이터만 복사합니다. 

 

상수 a는 메모리 공간의 주소(1)를 할당받았으며 해당 메모리 공간의 주소 내부에는 객체 {y : 1}이 저장된 메모리 공간의 주소(2)를 할당받아 참조하고 있습니다. 이때 상수 b는 메모리 공간 주소(1)에 저장된 값만 새로운 메모리 공간 주소(3)에 저장한 것이며 새로운 메모리 공간 주소(3)에서는 여전히 {y : 1}이 저장된 메모리 공간의 주소(2)를 참조하고 있습니다.

 

때문에 상수 b가 값을 변경할 때 상수 a가 영향을 받지 않기 위해서는 모든 차원의 데이터를 복사하는 깊은 복사를 해주어야 하며, lodash 라이브러리를 사용하면 보다 쉽게 깊은 복사가 가능합니다.

 

 

사용 방법

*node.js를 이용하여 lodash 라이브러리를 활용한 깊은 복사 예시입니다.

 

npm inint -y

npm i lodash

우선 위의 코드를 터미널에 입력하여 해당 라이브러리를 다운로드합니다.

 

import cloneDeep from "lodash/cloneDeep";

다음으로 lodash 라이브러리에서 cloneDeep을 import 해줍니다.

 

 

import cloneDeep from "lodash/cloneDeep";

const a = { x: { y: 1 } };
const b = cloneDeep(a); // 깊은 복사

b.x.y = 2;

console.log(a.x.y); // 1 출력

lodash 라이브러리의 cloneDeep을 사용하여 깊은 복사를 하였기 때문에 상수 b는 a의 모든 차원 데이터를 복사하였고, 때문에 복사한 값을 변경하여도 a에 더 이상 영향을 끼치지 않게 됩니다.

 

 

*다차원 배열을 깊은 복사할 때도 위의 객체 예시와 동일합니다