JavaScript Academy · 강의

깊은 복사를 위한 structuredClone

복잡한 객체를 안전하게 복제합니다.

깊은 복사를 위한 structuredClone은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

깊은 복사 문제

전개 구문과 Object.assign은 shallow 복사본을 만듭니다. 중첩된 객체는 참조로 공유됩니다. 중첩 구조를 완전히 복제하려면 깊은 복사가 필요합니다.

structuredClone이 내장된 해결책입니다.

전개 구문만으로는 충분하지 않은 이유

전개 구문으로 만든 복사본은 중첩된 객체를 공유합니다. 복사본의 중첩된 부분을 변경하면 원본에도 영향을 줍니다.

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone로 해결하기

structuredClone은 전체 구조를 재귀적으로 복사합니다. clone을 변경해도 원본에는 절대 영향을 주지 않습니다.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

독립적인 중첩 객체

복제한 후에는 각 중첩 객체가 서로 다른 참조가 되므로 모든 수준에서 동일성 비교 결과가 거짓입니다.

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

배열 복제하기

중첩된 배열을 포함한 배열도 깊게 복제됩니다. clone의 중첩 배열에 요소를 추가해도 원본은 변경되지 않습니다.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Map과 Set 지원

JSON.parse(JSON.stringify(...))와 달리 structuredClone은 Map, Set, Date를 비롯한 여러 내장 형식을 지원합니다.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

순환 참조 처리하기

자기 자신을 참조하는 객체는 JSON 기법을 깨뜨리지만 structuredClone으로는 문제없이 복제됩니다.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

복제할 수 없는 것

structuredClone은 함수나 DOM 노드를 복사할 수 없으므로 DataCloneError를 발생시킵니다. 또한 프로토타입 체인을 제거하고 일반 객체를 반환합니다.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

프로토타입은 보존되지 않습니다

복제된 클래스 인스턴스는 일반 객체가 됩니다. 데이터는 복사되지만 메서드와 프로토타입은 사라집니다.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone과 JSON 기법 비교

기존의 JSON.parse(JSON.stringify(x))는 undefined를 잃고 날짜를 문자열로 변환하며 순환 구조에서는 실패합니다. structuredClone은 직렬화 가능한 데이터에서 이러한 문제를 피합니다.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

중요한 이유

structuredClone은 일반 데이터에 신뢰할 수 있는 내장 깊은 복사 기능을 제공하므로 취약한 수제 복제 코드를 대신할 수 있습니다. 중첩된 상태를 완전히 독립적으로 복사해야 할 때 사용하되, 함수와 프로토타입은 제거된다는 점을 기억하십시오.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

빠른 확인

중첩된 데이터에 전개 연산자 대신 structuredClone을 사용하는 이유는 무엇입니까?

복습: structuredClone

신뢰할 수 있는 깊은 복사 방법을 배웠습니다.

전개 구문은 얕은 복사를 수행하고, structuredClone은 깊게 복사합니다.
Map, Set, Date와 순환 참조를 지원합니다.
함수나 DOM 노드는 복제할 수 없으며 프로토타입을 제거합니다.
JSON.parse(JSON.stringify()) 기법을 더 안전하게 대체할 수 있습니다.

자주 묻는 질문

“깊은 복사를 위한 structuredClone” 강의는 무료인가요?

네 — “깊은 복사를 위한 structuredClone” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“깊은 복사를 위한 structuredClone”에서 뭘 배우나요?

복잡한 객체를 안전하게 복제합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“깊은 복사를 위한 structuredClone” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기