깊은 복사, 얕은 복사

React component에서 상태를 업데이트할 때 불변성(immutable)을 유지하는 것은 굉장히 중요하다.

 

이를 위해 기존 데이터를 수정할 때 직접 수정하지 않고(기존의 데이터가 직접 수정되어서는 안된다.), 새로운 객체를 만들어 그곳에 필요한 부분만을 교체하는 식으로 진행된다. 

 

이 개념을 확실히 하기 위해 단순 객체 복사, 깊은 복사, 얕은 복사 개념을 확실히 하고 넘어갈 필요가 있다.

 

 

<단순 객체 복사>

 

단순 객체 복사는 새로운 객체를 만드는 것이 아닌 여러개의 변수가 하나의 객체를 가리키게 되는 것이다.

 

(책(리액트를 다루는기술)에 있는 코드)

const array=[1, 2, 3, 4, 5];

 

const nextArrayBad = array; // 새로운 객체가 만들어지는 것이 아닌 똑같은 배열을 가리키게 된다.

nextArrayBad[0] = 100; // nextArrayBad[0]와 array[0] 모두 100으로 바뀐다.

console.log(array === nextArrayBad); // 완전히 같은 배열이기 때문에 true

 

 

<얕은 복사(shallow copy)>

 

얕은 복사를 하게 되면 내부의 값이 완전히 새로 복사되는 것이 아니라 가장 바깥쪽에 있는 값만 복사된다.  따라서, 내부의 값이 객체 혹은 배열이라면 내부의 값은 따로 복사해주어야 한다.

 

React에서 얕은 복사가 진행되는 문법에는 ...문법이 있다.

 

(책에 있는 코드)

const nextArrayGood = [...array]; // 배열 내부의 값을 모두 얕은 복사한다. array가 단순한 배열 형태이기 때문에 완전                                                  히 새로운 배열이 생겨난다.

nextArrayGood[0] = 100;

console.log(array === nextArrayGood); //서로 다른 배열이기 때문에 false

 

 

<깊은 복사(deep copy)>

 

 내부의 값이 객체 혹은 배열이라면 내부의 값을 따로 복사해주어야 한다.

 

const object = {   

    foo: 'bar',

    value: 1

};

 

const nextObjectBad = object; // 똑같은 객체를 가리킨다.

nextObjectBad.value = nextObjectBad.value + 1;

console.log(object === nextObjectBad); // 같은 객체이기 때문에 true

 

---------------------------------------->제대로 된 복사가 되지 않은 경우.

 

const nextObjectGood = {

    ...object,

    value: object.value+1

};

console.log(object===nextObjectGood); // 다른 객체가 돼서 false

----------------------------------------->이런 식의 깊은 복사가 이루어져야 한다.

 

    

다른 블로그에서는 이 3개를

 

1. 단순복제는 완전히 동일한 객체,
2. 얕은복사(shallow copy)는 복합객체(껍데기)만 복사, 그 내용은 동일한 객체
3. 깊은복사(deep copy)는 복합객체 복사 + 그 내용도 재귀적으로 복사

이런 식으로 정의해두었다.(출처-https://blueshw.github.io/2016/01/20/shallow-copy-deep-copy/)

(이해하기도 좋고 내용도 좋은 것 같다. 나중에 또 들어가서 공부하면 좋을듯.)

 

React에서 객체 안에 있는 객체의 불변성을 지키면서 새 값을 할당하는 일은 굉장히 어렵다. 이는 immer 라이브러리를 통해 해결이 가능한데 아직 공부가 되지 않아 그때 다시 게시물을 올려야겠다.