얕은 복사/깊은 복사

얕은복사

얕은 복사는 객체의 최상위 프로퍼티만 새로 복사하고(1단계 프로퍼티),
내부에 있는 중첩 객체나 배열은 기존 참조를 그대로 공유하는 복사 방식입니다.
따라서 복사본에서 중첩 데이터를 수정하면 원본에도 영향이 발생할 수 있습니다.
대표적으로 스프레드 연산자나 Object.assign이 얕은 복사를 수행합니다.

얕은복사 예시

const user1 = {
  name: "Lee",
  address: { city: "Seoul" }
}

const user2 = { ...user1 } // 얕은 복사 (1단계만 복사)

user2.address.city = "Busan"

console.log(user1.address.city) // "Busan" ← 원본도 함께 변경됨

깊은 복사

깊은 복사는 객체 내부의 중첩된 값까지 모두 새롭게 복사하여 완전히 독립적인 참조를 만드는 방식입니다.
그래서 복사본을 수정해도 원본에는 영향을 주지 않으며, 상태 불변성을 유지해야 하는 상황에서 중요하게 사용됩니다.
구현 방법으로는 structuredClone, 재귀 기반 복사, 또는 Immer 같은 라이브러리가 있습니다.


깊은복사 예시

const user1 = {
  name: "Lee",
  address: { city: "Seoul" }
}

const user2 = structuredClone(user1) // 깊은 복사 (모든 depth 복사)

user2.address.city = "Busan"

console.log(user1.address.city) // "Seoul" ← 원본 유지

리액트와 얕은복사/깊은복사
리액트에서는 상태 변경 여부를 참조 비교로 판단합니다.
그래서 기존 상태를 직접 수정하지 않고,
불변성을 유지하는 방식으로 상태를 관리하는 것이 중요합니다.