얕은 복사와 깊은 복사의 차이를 설명해주세요.

얕은 복사는 1단계 속성만 복사하고 중첩 객체 참조는 공유합니다. 깊은 복사는 중첩 구조까지 새로 복사해 원본과 독립시키며 structuredClone이나 라이브러리 등을 사용할 수 있습니다.

핵심 개념

핵심 기준은 중첩 객체 참조가 공유되는지 여부입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

JavaScript는 실행 문맥, 비동기 흐름, 참조 관계가 코드 동작에 직접 영향을 주는 언어입니다. 그래서 문법을 외우는 것보다 값이 언제 결정되고 어떤 순서로 실행되는지 이해하는 것이 중요합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

const original = {
  user: { name: "Ada" },
};

const shallow = { ...original };
shallow.user.name = "Grace";

console.log(original.user.name); // "Grace"

얕은 복사는 중첩 객체 참조를 공유합니다. 상태 관리나 불변 업데이트에서는 어느 깊이까지 새로 만들어야 하는지 확인해야 합니다.

실무에서 주의할 점

• 암묵적 변환이나 실행 문맥에 기대면 작은 리팩터링에도 동작이 달라질 수 있습니다.
• 비동기 코드에서는 실행 순서와 에러 전파 경로를 반드시 확인해야 합니다.
• 브라우저 이벤트나 타이머를 사용했다면 정리(cleanup) 시점을 놓치지 않는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

JS, 객체, 복사, 참조

정리

한 줄로 정리하면, 얕은 복사는 1단계 속성만 복사하고 중첩 객체 참조는 공유합니다. 깊은 복사는 중첩 구조까지 새로 복사해 원본과 독립시키며 structuredClone이나 라이브러리 등을 사용할 수 있습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

얕은 복사와 깊은 복사

얕은 복사는 최상위 객체만 새로 만들고 중첩 객체의 참조는 공유합니다. 깊은 복사는 중첩 구조까지 새로 복사합니다.

const user = { name: 'Kim', address: { city: 'Seoul' } };
const shallow = { ...user };

shallow.address.city = 'Busan';
console.log(user.address.city); // Busan: 중첩 참조 공유

깊은 복사 방법

const copied = structuredClone(user);
copied.address.city = 'Jeju';
console.log(user.address.city); // Busan

structuredClone은 Date, Map, Set 등도 비교적 잘 처리하지만 함수, DOM 노드 등은 복사할 수 없습니다. JSON 방식은 간단하지만 undefined, 함수, Date, 순환 참조를 잃거나 실패할 수 있습니다.

실무 기준

• React state 업데이트는 필요한 경로만 얕게 복사하는 것이 일반적입니다.
• 전체 깊은 복사는 비용이 크므로 큰 데이터에서 남용하지 않습니다.
• 중첩 업데이트가 많으면 Immer 같은 도구를 검토합니다.