JS 객체 복사, 얕은 복사 vs 깊은 복사, 완벽 정리!
by DD
8개월 전
조회수 8
자바스크립트 객체는 참조 타입이므로 복사 시 원본과 복사본이 같은 메모리를 공유함
얕은 복사는 최상위 속성만 복사하고, 깊은 복사는 중첩 객체까지 복제함
상태 관리, API 응답 처리 등에서 객체 복사 개념 이해가 중요함
얕은 복사의 함정: 전개 연산자, Object.assign()
자바스크립트에서 전개 연산자(...)와 Object.assign()은 얕은 복사를 수행한다. 구체적으로 최상위 속성만 복사하고, 중첩된 객체는 참조를 공유한다. 따라서 복사본에서 중첩 객체를 수정하면 원본 데이터도 변경된다는 점을 주의해야 한다.
깊은 복사: JSON.stringify()와 structuredClone()
깊은 복사는 중첩된 객체까지 완전히 복제하여 독립적인 객체를 생성한다. JSON.stringify()와 JSON.parse()를 사용하면 간단하지만, undefined, function 등은 손실된다. 따라서 structuredClone()을 사용하거나, 직접 재귀 함수를 구현하는 방법도 고려해야 한다.
상황별 객체 복사 선택 가이드
객체 구조가 단순하고 중첩된 속성을 수정하지 않는다면 얕은 복사로 충분하다. 반면, 중첩 객체를 수정해야 한다면 반드시 깊은 복사를 사용해야 한다. 따라서 상태 관리, API 응답 처리 등에서 데이터 무결성을 위해 적절한 복사 방식을 선택해야 한다.
