깊은 복사 vs 얕은 복사, JavaScript 객체 복사의 모든 것 - 코드카인 티스토리

안녕하세요 😊 코드카인 여러분!

오늘은 JavaScript 객체의 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)에 대해 알아볼 거예요!
이 두 개념은 마치 이삿짐을 옮기는 과정과 비슷한데요. 큰 물건(데이터)을 옮길 때 짐이 잘못된 곳으로 옮겨지면 혼란이 생길 수 있잖아요? 그 원리를 이해하면 코딩도 더 쉬워질 거예요!

---

🏡 깊은 복사와 얕은 복사란?

깊은 복사와 얕은 복사는 JavaScript에서 객체를 복사하는 방법이에요.
그럼 이 두 가지를 어떻게 구분하는지 일상생활의 비유를 통해 설명해볼게요.

🍎 얕은 복사 (Shallow Copy)

얕은 복사는 물건의 위치만 옮기는 것과 같아요.
예를 들어, 책을 박스에 담지 않고 "책이 거기에 있다"고 적은 쪽지 하나를 옮기는 거예요.
이 경우, 책의 실제 내용이 아니라 위치를 참조하기 때문에 원본 데이터가 바뀌면 복사본도 영향을 받아요.

🎁 깊은 복사 (Deep Copy)

깊은 복사는 물건 자체를 완전히 복제하는 거예요.
예를 들어, 박스에 책을 통째로 복사해서 옮긴다면 원본 박스와 복사본 박스는 서로 완전히 독립적이에요.
이렇게 하면 원본 데이터가 바뀌어도 복사본은 전혀 영향을 받지 않아요.

---

👩‍💻 코드로 보는 얕은 복사와 깊은 복사

얕은 복사 (Shallow Copy)

const original = { name: "Alice", age: 25 };
const shallowCopy = { ...original };

shallowCopy.name = "Bob";

console.log(original.name); // Alice
console.log(shallowCopy.name); // Bob

여기까지는 괜찮아 보이죠? 하지만 객체 안에 중첩 객체가 있을 경우 문제가 생겨요.

const original = { name: "Alice", info: { age: 25, city: "Seoul" } };
const shallowCopy = { ...original };

// 중첩 객체를 변경
shallowCopy.info.city = "Busan";

console.log(original.info.city); // Busan 😱 (원본 데이터가 변경됨!)
console.log(shallowCopy.info.city); // Busan

깊은 복사 (Deep Copy)

const original = { name: "Alice", info: { age: 25, city: "Seoul" } };

// 깊은 복사 방법 1: JSON
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.info.city = "Busan";

console.log(original.info.city); // Seoul (원본 데이터는 그대로!)
console.log(deepCopy.info.city); // Busan

하지만 주의! JSON 방식은 함수, undefined, Symbol 같은 데이터는 복사할 수 없어요.

깊은 복사 방법 2: 라이브러리 활용 (Lodash)

Lodash는 JavaScript 개발에서 자주 쓰이는 유틸리티 라이브러리예요.

const _ = require("lodash");

const original = { name: "Alice", info: { age: 25, city: "Seoul" } };
const deepCopy = _.cloneDeep(original);

deepCopy.info.city = "Busan";

console.log(original.info.city); // Seoul
console.log(deepCopy.info.city); // Busan

---

🧩 얕은 복사와 깊은 복사의 활용

언제 얕은 복사를 사용할까?

• 성능이 중요한 경우 (중첩 객체가 많지 않을 때).
• 객체 내부가 단순한 구조일 때.

언제 깊은 복사를 사용할까?

• 중첩 객체가 많거나 원본 객체와 완전히 독립적인 데이터가 필요할 때.
• API 응답 데이터를 변경하거나 원본 데이터를 유지해야 할 때.

---

🚀 실생활에 적용해보기

예시 1: 쇼핑몰 장바구니 데이터

• 얕은 복사: 사용자 UI에서 일시적으로 데이터를 보여줄 때.
• 깊은 복사: 결제 정보를 처리할 때 원본 데이터를 안전하게 보존.

예시 2: 게임 설정 저장

• 얕은 복사: 사용자가 변경하기 전 기본 설정 값을 보여줄 때.
• 깊은 복사: 설정을 저장하거나 공유할 때.

---

😊 마무리하며..

깊은 복사와 얕은 복사는 생각보다 간단하죠?
꼭 필요한 상황에서 어떤 복사를 선택할지 전략적으로 판단하면 돼요!
이제 여러분도 효율적인 데이터 관리의 고수가 될 준비가 됐답니다. ✨