얕은 비교와 깊은 비교 (+ 얕은 복사와 깊은 복사)

[ghdtjgus76]

얕은 비교

원시 자료형은 값을 비교함
참조 자료형은 값 또는 속성을 비교하지 않고, 참조되는 위치를 비교함

// 원시 자료형
const a = 'a';
const b = 'a';

console.log(a === b);  // true

// 참조 자료형
const arr1 = [1, 2];
const arr2 = [1, 2];

console.log(arr1 === arr2);  // false

깊은 비교

깊은 비교에서는 객체라도 값으로 비교함

깊은 비교는 두 방식을 사용함

• 객체 depth가 깊지 않은 경우: JSON.stringify() 사용
• 객체 depth가 깊은 경우: lodash 라이브러리의 isEqual() 사용

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 4 } };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2));  // true
console.log(JSON.stringify(obj1) === JSON.stringify(obj3));  // false

import _ from 'lodash';

const obj1 = { a: 1, b: { c: 2, d: { e: 5 } } };
const obj2 = { a: 1, b: { c: 2, d: { e: 5 } } };
const obj3 = { a: 1, b: { c: 3, d: { e: 6 } } };

console.log(_.isEqual(obj1, obj2)); // true
console.log(_.isEqual(obj1, obj3)); // false

얕은 비교를 사용하는 상황

1. 불변성을 유지하는 경우
   리액트의 상태가 변경될 때 불변성을 유지하기 위해 원본을 수정하지 않고 새로운 객체를 생성함
   얕은 비교를 통해 각 객체의 참조 값 비교를 통해 변경 여부를 판단하게 됨
2. 성능이 중요한 경우

깊은 비교를 사용하는 상황

1. 복잡한 데이터 구조를 다루는 경우
   객체나 배열 내부 중첩된 구조가 있고, 내부 값까지 변경 사항을 감지해야 하는 경우 깊은 비교를 사용함
2. 특정 상황에서의 예외 처리
   객체나 배열의 특정 키 값만 변경되었을 때만 업데이트를 수행해야 하는 경우 깊은 비교를 사용함

리액트에서 얕은 비교를 사용하는 경우

1. React.memo()에서 props를 비교할 때
2. 리액트 컴포넌트가 리렌더링하기 전

대부분의 상황에서는 얕은 비교를 기본으로 사용하고, 성능이나 정확성에 영향을 줄 수 있는 특정 상황에서만 깊은 비교를 추가로 적용함

참고 자료

https://velog.io/@neighborkim/%EC%96%95%EC%9D%80-%EB%B9%84%EA%B5%90Shallow-Compare-%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B9%84%EA%B5%90Deep-Compare
https://lulu-developmentlog.tistory.com/234

[coddingyun]

리사가 이미 잘 설명해준 것 같아서 한가지 참고하면 좋을 점만 덧붙이겠습니다~!

HTML에 최근 추가된 structuredClone() 내장 함수로 깊은 복사가 가능합니다. 이 함수는 구조화된 복제 알고리즘을 사용합니다.

• 장점

1. JSON.stringify는 기본 객체, 배열 및 원시 타입만 다룰 수 있지만, structuredClone()은 모두 가능합니다.

2. lodash의 isEqual가 달리 라이브러리를 설치할 필요가 없습니다. (Lodash 전체 라이브러리를 사용할 경우 gzip시 25K가 필요합니다. 단순히 깊은 복사를 위해서는 이는 너무 많은 용량입니다.)

• 한계점: 함수, DOM 노드, 프로토타입 복제 불가능

• 참조: https://soobing.github.io/javascript/deep-copying-objects-with-the-structuredclone-api/

[gs0428]

혹시 structuredClone, JSON.stringify, lodash를 이용한 깊은 복사 성능 비교? 같은거 해주실 수 있을까요?

[ghdtjgus76]

비슷한 맥락으로, 얕은 복사와 깊은 복사에 대해서도 알아봤습니다.

원시값은 값 복사 시 복사된 값을 다른 메모리에 할당합니다.

const a = 1;
let b = a;

b = 3;

console.log(a);  // 1
console.log(b);  // 3

참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킵니다.

const a = { number: 1 }
const b = a;

b.number = 2

console.log(a)  // { number: 2 }
console.log(b)  // { number: 2 }
console.log(a === b) // true

얕은 복사는 객체 복사 시 복사본의 속성이 원본 객체와 같은 참조를 공유하는 복사입니다.
따라서 원본이나 복사본을 변경하면 다른 객체 또한 변경될 수 있습니다.
얕은 복사를 하는 방법에는 Object.assign(), 전개 연산자 등이 있습니다.
이 내용은 discussion 내부 리액트 불변성에도 같은 내용이 있으니 참고 부탁드립니다.

깊은 복사는 복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조를 공유하지 않는 복사입니다.
따라서 원본이나 복사본을 변경해도 다른 객체가 변경되지 않습니다.

깊은 복사를 하는 방법에는 재귀 함수를 이용한 복사, JSON.stringify(), 라이브러리 사용 등이 있습니다.

재귀 함수를 이용한 복사는 다음과 같습니다.

const obj = {
  a: 1,
  b: {
    c: 2
  }
}

function copyObj(obj) {
  const result = {};

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      result[key] = copyObj(obj[key])
    } else {
      result[key] = obj[key]
    }
  }

  return result
}

const copiedObj = copyObj(obj)
copiedObj.b.c = 3
console.log(obj.b.c === copiedObj.b.c);  // false

JSON.stringify() 방식은 다음과 같습니다.
객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어집니다.
객체를 json.stringify() 후 JSON.parse()를 이용해 다시 자바스크립트 객체로 만들어주면 깊은 복사가 됩니다.
하지만 이 방법은 다른 방법에 비해 느리다고 합니다.

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = JSON.parse(JSON.stringify(obj));

copiedObj.b.c = 3

console.log(obj.b.c === copiedObj.b.c)  // false

참고 자료
https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC
https://developer.mozilla.org/ko/docs/Glossary/Shallow_copy
https://developer.mozilla.org/ko/docs/Glossary/Deep_copy