[JavaScript] Deep copy vs Shallow copy

리액트 코딩 강의를 듣다가 리액트는 Deep copy를 사용해야 한다는 말을 듣고 Deep copy의 개념과 또다른 용어 Shallow copy를 정리하고자 한다.

https://replit.com/ 사이트에서 간단하게 코딩을 해보겠다.

 

 

 이때 사용할 것은 

각각 영어를 번역하면 Deep copy 는 깊은 복사, Shallow copy 얕은 복사이다.

이것의 뜻은 뭘까?

우리가 프로그래밍 언어를 만드는 관점에서 보자

 

let num1 = 1;
let num2 = num1;

num2 = 2;

console.log(num1,num2) // num1 : 1, num2 : 2

 

위와 같은 결과를 깊게 생각해보면,

1번째는 num1 :1 num : 2 의 값이고

2번째는  num1 :2 num : 2 가 된다.

 

2번째는 어떻게 하면 이러한 결과가 나올까? ❓

 

첫번째는 let num2 = num1; 일 경우 num2는 1이라는 값이 들어간다.

num2는 num1에 영향을 미치지 않는다.

이것을 deep copy라고 한다.

 

다르게 해석하게 되면 두번째 방법이다.

이는 num1 자체를 넣는것이다. 이는 num2와 num1이 동일하다는 관점에서 보면 num1는 2가 된다.

 

원시값은 deep copy로 해석이 된다.

즉, num2는 num1 자체다라고 해석하는것이 아닌, num1과 num2는 상관이 없고 그냥 값만 넣는다. 라고 해석이 된다. 

 

❓ 그러면 shallow copy는 언제 일어날까 ❓

 

deep copy의 관점에서 본다면 Copy안에는 hyebin이라는 값의 객체가 들어가기 때문에, 출력을 한다면 원본과 복사본의 값이 달라야한다.

shallow copy 관점에서 본다면 Copy는 hyebin 자체가 되기 때문에 같은 값이 나올것이다.

 

답은 후자가 맞다. 즉 객체는 shallow copy 가 일어난다.

 

 

❓ 왜 귀찮게 원시값은 deep, 객체는 shallow 인가 ❓

가장 중요한 이유는 deep copy로 구현 하면 굉장히 비 효율적이 된다. 

코드가 돌아가는 성능적으로 해석이 되면 , 객체가 deep copy가 된다면 하나하나 저장하는데 시간이 걸리게 된다. 숫자 하나를 넣는데 걸리는 시간이 만약 1초라면 많은 객체의 데이터를 넣는다면 수십초 수백초 등 굉장히 비효율적이 된다.

따라서 자체 하나만 알려준다면 굉장히 효율적이고 간단하게 된다. 

 

하지만 코딩을 하다 보면 원래있는 값을 남겨두고 코딩을 해야할 경우가 있다.

따라서 deep copy를 사용하기 위해선

let hyebinCopy = [...hyebin];

이런식으로 코딩하면 된다.