[ Lodash ] _.cloneDeep 사용법과 예시

_.cloneDeep이란?

---

_.cloneDeep은 Lodash에서 제공하는 유틸리티 함수로, 객체(Object)나 배열(Array)을 깊은 복사(Deep Copy)하는 역할을 합니다.

일반적으로 자바스크립트에서 객체를 복사할 때, 얕은 복사(Shallow Copy)만 이루어집니다. 얕은 복사는 최상위 속성만 복사하고, 중첩된 객체나 배열은 그대로 참조를 복사하기 때문에, 원본 데이터에 의도치 않은 영향을 미칠 수 있습니다.

반면, _.cloneDeep을 사용하면 객체의 모든 속성과 중첩된 구조까지 독립적으로 복사하여, 복사본을 수정해도 원본 데이터에는 전혀 영향을 미치지 않게 됩니다.

 

 

얕은 복사와 깊은 복사의 차이

---

먼저, 얕은 복사와 깊은 복사가 어떤 차이를 만드는지 알아보겠습니다.

 

얕은 복사 예시:

 

const _ = require('lodash');

const original = {
  name: "홍길동",
  details: {
    age: 30,
    hobbies: ["독서", "여행"]
  }
};

// 얕은 복사
const shallowCopy = _.clone(original);

// 복사본을 수정
shallowCopy.details.age = 40;

console.log(original.details.age); // 40 (원본도 수정됨)

 

이 예시에서 shallowCopy는 얕은 복사이기 때문에, details 객체의 age를 수정하면 원본인 original 객체의 details.age도 변경됩니다. 이는 중첩된 객체가 복사된 것이 아니라, **참조(reference)**만 복사되었기 때문입니다.

 

 

깊은 복사 예시:

// 깊은 복사
const deepCopy = _.cloneDeep(original);

// 복사본을 수정
deepCopy.details.age = 50;

console.log(original.details.age); // 30 (원본은 수정되지 않음)

 

 

 

 

_.cloneDeep을 언제 사용해야 할까?

---

_.cloneDeep은 중첩된 객체나 배열을 복사할 때 유용합니다. 예를 들어, 상태 관리를 하는 프레임워크나 라이브러리(React, Vue 등)에서 데이터를 변경할 때 원본 데이터를 변경하지 않고, 복사본을 수정하는 것이 안전할 때가 많습니다.

또한, 대용량 데이터나 복잡한 객체 구조를 다룰 때 원본 데이터를 보호하고 싶을 때 유용합니다.

 

 

실전 예시: 상태 관리

---

상태 관리에서는 종종 상태 객체를 복사한 후 일부 값을 변경해야 합니다. 이때 _.cloneDeep을 사용하면 원본 상태가 보호되면서도 새로운 상태를 쉽게 생성할 수 있습니다.

 

const state = {
  user: {
    name: "홍길동",
    info: {
      age: 30,
      address: "서울"
    }
  }
};

// 깊은 복사
const newState = _.cloneDeep(state);

// 복사본 수정
newState.user.info.age = 35;

console.log(state.user.info.age); // 30 (원본 상태는 변경되지 않음)
console.log(newState.user.info.age); // 35 (복사본은 변경됨)

 

위 예시에서는 원본 상태 state를 _.cloneDeep으로 깊은 복사한 후, 복사본 newState의 age를 변경했더라도 원본은 그대로 유지됩니다. 이는 상태 관리에서 매우 중요한 부분입니다.

 

 

 

마무리

---

_.cloneDeep은 복잡한 객체나 배열을 다룰 때 아주 유용한 함수입니다. 특히 중첩된 데이터를 안전하게 복사하고 수정할 수 있어, 데이터 일관성을 유지하고 의도치 않은 버그를 방지할 수 있습니다. 객체나 배열의 복사본을 사용해 원본 데이터를 보호해야 할 때는 꼭 깊은 복사를 고려해 보세요!