얕은 복사, 깊은 복사

얇은 복사 , 깊은 복사

얇은 복사는 최상위 값만 복사하고 내부 객체는 동일한 참조 주소를 공유한다. 이로 인해 타겟 객체(복사본)를 수정하면 소스객체(원본)까지 영향을 미치는 사이드 이펙트(Side Effect)가 발생한다. 반면 깊은 복사는 하위 계층까지 모두 복제하여 두 객체가 메모리 상에서 완전히 독립된 상태를 유지하게 한다.

JSON을 활용한 깊은 복사 원리

복잡한 계층 구조를 가진 객체를 직렬화 과정인 JSON.stringify를 통해 단순 문자열로 변환한다. 이후 JSON.parse로 역직렬화를 수행하면, 이전의 참조 관계가 모두 끊어진 채 새롭게 할당된 메모리에 객체가 재구성되어 완벽한 데이터 무결성을 보장한다.

클라이언트-서버 통신에서의 JSON 활용

서버와 브라우저는 서로 다른 메모리 공간을 사용하므로 직접적인 객체 참조가 불가능하다. 따라서 모든 데이터를 텍스트 기반인 JSON으로 직렬화하여 전송하고, 수신 측에서 다시 역직렬화하여 자신의 환경에 맞는 객체로 복원함으로써 시스템 간 상호 운용성을 확보한다.

대체 기술

JSON방식이 주로 사용되었으나, 현재는 브라우저 기본 API인 structuredClone()이 표준으로 자리 잡아 더 높은 성능과 정밀한 깊은 복사를 돕는다. 또한 복잡한 객체 조작이 필요한 대규모 프로젝트에서는 Lodash 라이브러리의 _.cloneDeep()같은 검증된 유틸리티를 활용하기도 한다.

structuredClone()

이 함수는 이름 그대로 객체를 구조화된 상태로 복제를 한다. 단순히 문자열로 바꾸는 것이 아닌, 브라우저 엔진 레벨에서 지원하는 깊은 복사 기술이다.
사용법은 매우 간단하다. 복사하고 싶은 소스 객체(원본)를 인자로 넣기만 하면 된다.

복사
const source = {
  name: "Gemini",
  stats: { hp: 100, mp: 50 },
  tags: ["AI", "Assistant"]
};

// 최신 표준 깊은 복사 방식
const target = structuredClone(source);

target.stats.hp = 0; // 타겟(복사본) 수정

console.log(source.stats.hp); // 100 (소스 객체 영향 x)
console.log(target.stats.hp); // 0 (타겟 객체 영향 o)

JSON 방식과의 차이

1. 알고리즘의 정밀도(데이터 무결성)
    JSON : 객체를 문자열로 바꾸는 과정에서 데이터가 유실되거나 단순 문자열로 변해버리는 현상 발생.
   structuredClone : 자바스크립트 엔진이 객체의 데이터 타입을 보존하며 복제하므로, 원본 그대로의 성질을 유지.

2. 복잡한 구조 처리
    JSON : 객체가 자기 자신을 참조하는 순환 참조 구조를 만나면 에러 발생.
    structuredClone : 복잡하게 얽힌 객체 간의 참조 관계까지 완벽하게 재현.

3. 처리 방식과 성능
    JSON : 객체 -> 문자열 -> 객체 라는 중간 변환 단계를 거치는 범용 직렬화 방식.
    structuredClone : 브라우저 엔진 내부에서 메모리 데이터를 직접 복사하는 네이티브 복제 방식으로, 중간 변환 과정없이 대용량 데이터에서 안정적이고 효율적.
    JSON은