1. 얕은 비교(Shallow Compare) 란?

• 숫자, 문자열 등 원시 자료형(Primitive Type)은 값을 비교한다.
• 배열, 객체 등 참조 자료형(Reference Type)은 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교한다.
• 예시

  let str1 = "값1";
  let str2 = "값1";
  console.log(str1 === str2);// true
  
  let arr1 = [1, 2, 3];
  let arr2 = [1, 2, 3];
  console.log(arr1 === arr2);// false, 참조되는 위치가 다르기 때문

---

2. 깊은 비교(Deep Compare) 란?

• 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다.
  1. Object depth 가 깊지 않은 경우 : JSON.stringify() 사용
  2. Object depth 가 깊은 경우 : lodash 라이브러리의 isEqual() 사용
• 예시

  let obj1 = { a: 1, b: { c: 2 } };
  let obj2 = { a: 1, b: { c: 2 } };
  let obj3 = { a: 1, b: { c: 3 } };
  
  // JSON.stringify() 메서드를 사용한 경우
  console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
  console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false, b 객체의 c 속성값이 다름
  
  // Lodash 라이브러리의 isEqual() 메서드를 사용한 경우
  import _ from 'lodash';
  console.log(_.isEqual(obj1, obj2)); // true
  console.log(_.isEqual(obj1, obj3)); // false, b 객체의 c 속성값이 다름

---

리액트에서 얕은 비교는 언제 사용하는가?

1. React.memo() 에서 props를 비교할 때 (React.memo() 란 무엇인가? 링크)

2. 리액트 컴포넌트가 리렌더링을 하기 전

   1. state 변경이 있을 때
   2. 부모 컴포넌트가 렌더링 될 때

   (참고 : React 가 리렌더링 되는 경우)

   • state 변경이 있을 때
   • 부모 컴포넌트가 렌더링 될 때
   • 새로운 props이 들어올 때
   • shouldComponentUpdate 에서 true 가 반환될 때
   • force Update 가 실행될 때

---

원시 자료형과 참조 자료형의 메모리 저장 차이

• 원시 자료형(예: 숫자, 문자열)은 메모리에 값을 직접 저장한다. 반면, 참조 자료형(예: 배열, 객체)은 메모리에서 값을 직접 저장하지 않고, 실제 값들이 저장된 메모리 주소를 참조한다. 이러한 차이는 값의 비교 방식에서도 영향을 미치게 되며, 얕은 비교와 깊은 비교의 차이를 이해하는데 중요한 요소이다.
• 예시

  let str = "A";
  let arr = ["A"];

  위 코드에서 str 변수는 원시 자료형으로, 메모리에 아스키 코드로 변환된 문자 'A'의 값인 65를 직접 저장한다. 반면, arr 변수는 참조 자료형으로, 배열 ["A"]가 저장되어 있는 메모리 주소를 참조한다.

  // 원시 자료형 메모리 상태 예시
  메모리 주소 |  값
  -----------|-----
  0x1234     |  65   <- str 변수의 값 ('A'의 아스키 코드값)
  
  // 참조 자료형 메모리 상태 예시
  메모리 주소 |  값
  -----------|-----
  0x5678     | 0xABCD  <- arr 변수가 참조하는 메모리 주소
  
  // 배열의 실제 원소 값이 저장된 메모리 상태(Control Block)
  메모리 주소 |  값
  -----------|-----
  0xABCD     | 65    <- 배열 ["A"]의 원소 'A' (아스키 코드로 문자 'A'의 값인 65를 저장)

---

정리

얕은 비교(Shallow Compare)는 참조 자료형의 경우 메모리 주소를 비교하기 때문에, 서로 다른 메모리 주소에 같은 값이 저장되어 있어도 다르게 인식된다. 이 때 깊은 비교(Deep Compare)를 사용하면 실제 값이 동일한지 정확하게 비교할 수 있다.

원시 자료형과 참조 자료형의 메모리 저장 방식의 차이를 이해하고, 얕은 비교와 깊은 비교를 적절하게 사용함으로써 값이 동일한지 정확하게 비교할 수 있다.