확산을 넘어서: **구조화된 클론`** 대 `{ ...객체 }` - 모든 React + 타입스크립트 엔지니어가 마스터해야 하는 딥카피 전술

React에서는 불변성이 핵심이며, 업데이트를 위해 직접적인 변이 대신 객체의 복사본이 필요합니다. 스프레드 연산자는 얕은 복사본을 제공하지만, 깊게 중첩된 데이터 구조에서 문제가 발생할 수 있습니다. 구조화된 복제`는 심층 복사를 위한 네이티브 브라우저 솔루션을 제공합니다. 스프레드 연산자는 값별로 1단계 필드를 복사하지만 중첩된 객체는 참조별로 복사합니다. 이는 플랫 상태 또는 중첩된 객체를 즉시 덮어쓰는 경우에 적합합니다. 구조화된Clone`은 맵과 집합을 포함한 다양한 데이터 유형을 재귀적으로 복사하지만 클래스 인스턴스와 함수는 삭제합니다. 성능 테스트 결과 플랫 객체의 경우 스프레드 연산자가 더 빠른 반면 `structuredClone`은 더 느리지만 완전한 복사를 보장하는 것으로 나타났습니다. React 패턴의 경우 로컬 상태 업데이트에는 얕은 복사본으로 충분할 때가 많습니다. 그러나 `structuredClone`은 무거운 형태의 상태 스냅샷을 만들거나 실행 취소 기능을 사용할 때 유용합니다. 복잡한 데이터 구조를 다룰 때는 사용자 정의 복제 메서드나 Immer와 같은 라이브러리가 유용할 수 있습니다. 구조화된클론`은 순환 참조를 처리하지만 함수나 DOM 노드에 대해 에러를 발생시킵니다. 스프레드와 `structuredClone` 중 어떤 것을 선택할지는 정확성과 미세 최적화의 필요성에 따라 달라집니다.