react에서는 각 컴포넌트의 리렌더링을 최적화하기 위해 자바스크립트의 얕은 복사를 활용합니다. 얕은 복사로 렌더링할지 말지를 빠르게 결정하는 것입니다.

자바스크립트의 얕은 복사에 대하여 간단하게 적어봅니다.

1. Primitive type, Objects

자바스크립트의 타입은 크게 2가지가 있습니다.

Primitive type과 Object가 그것인데요. 다음과 같이 분류됩니다.

Primitive type: Boolean, null, undefined, string, Number
Objects: Array, Function, Object
(Objects 타입들은 모두 기술적으로 모두 object임)

Primitive type들은 데이터 대입(전달)시 모두 실제 value가 복사됩니다.

Objects들은 데이터 대입(전달)시 모두 해당 객체의 주소값이 전달되며, reference가 전달되었다고 합니다.

2. 얕은 복사 예제

얕은 복사를 할 때에는 ES6이후 기준으로 Object.assign() 함수와 spread 연산자({...})를 사용합니다. 이 글에선 spread 연산자를 기준으로 설명하겠습니다.

let obj1 = { a : 1, b: { c: 1}};
let obj2 = obj1;
let obj3 = { ...obj1 };
obj1.a = 2;
obj1.b.c = 3;

console.log(JSON.stringify(obj2));	// {"a":2,"b":{"c":3}}
console.log(JSON.stringify(obj3));	// {"a":1,"b":{"c":3}}

위의 예시를 보면 얕은 복사가 어떻게 이루어지는지 파악할 수 있습니다.

let obj2 = obj1;
...
obj1.a = 2;
obj1.b.c = 3;

위의 구문에선 obj2에 obj1의 reference(주소값)이 저장됩니다.
따라서 obj1.a, obj1.b.c의 값이 변경됬을때 값이 같이 바뀌는 것을 볼 수 있습니다.

let obj3 = { ...obj1 };
obj1.a = 2;
obj1.b.c = 3;

위의 구문에선 spread 연산자를 사용하였습니다. 위의 예시에서 {...obj1}은 obj1의 reference를 복사하는 것이 아니라 obj1 객체의 내용안에 있는 값들을 복사합니다.

따라서 obj1.a = 2를 했어도 a는 primitive type이기 때문에 obj3에 복사될때 값이 복사가 되어 그대로 1이 출력되는 것을 볼 수있습니다.

하지만 obj3.b.c의 값은 변경되었는데요.

이것은 spread 연산자가 객체의 첫번째 depth에 해당하는 값만 복사하고, obj1.b는 객체타입이기 때문에 obj3.b에는 obj1.b의 refernece가 저장되었기 때문입니다.

마치며

위의 예제로 얕은 복사에 대하여 간단하게 알아보았습니다.

react에서는 이러한 얕은 복사를 이용하여 렌더링 해야할지 말아야할지를 빠르게 파악하기 때문에 얕은 복사의 간단한 개념에 대하여 알아보았습니다.

참고

https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0