얕은 복사(shallow copy)와 깊은 복사(deep copy)의 차이점은 무엇인가요?

Question

Accepted Answer

객체는 **참조로** 할당되므로 `b = a`는 복사가 아닙니다 — 둘 다 같은 객체를 가리킵니다. **얕은(shallow)** 복사는 최상위 레벨을 복제하지만 중첩 참조를 공유하고, **깊은(deep)** 복사는 모든 것을 복제하여 완전히 독립적입니다.

```js
const original = { name: "Ann", address: { city: "NY" } };

// 얕은 복사: spread / Object.assign
const shallow = { ...original };
shallow.name = "Bob";            // ✅ 독립적 (최상위 원시 값)
shallow.address.city = "LA";     // ⚠️ original.address.city도 변경됨 — 공유됨!

original.address.city; // "LA"  ← 얕은 복사본을 통해 변경됨
```

중첩된 `address` 객체는 둘에서 **동일한 참조**이므로, 그것을 변경하면 둘 다 영향을 받습니다.

## 깊은 복사 만들기

```js
const deep = structuredClone(original); // 현대적, 내장, 대부분의 타입 처리
deep.address.city = "Chicago";          // ✅ original은 영향받지 않음
```

다른 옵션과 그 주의점:

```js
JSON.parse(JSON.stringify(obj)); // 간단하지만 함수, Date → 문자열, undefined를 잃음
// lodash: _.cloneDeep(obj)       // 견고함, 복잡한 경우에
```

## 왜 중요한가

이는 "왜 내 상태가 예상치 못하게 바뀌었지?" 버그의 주요 원인이며, 특히 상태를 변경하면 안 되는 React/Redux에서 그렇습니다.

최상위 필드만 변경할 때는 스프레드로 충분하지만, 중첩 업데이트에서는 중첩 레벨도 복사하거나(`{ ...obj, address: { ...obj.address, city } }`) 깊은 복제를 해야 합니다.