---

Shallow comparison (얕은 비교)

• JS 객체의 동일성(reference equality)을 비교하는 법.
• 객체의 표면 수준에서 비교. (1deps; 중첩 개체는 더 들어가지 않음)
• 두 객체의 참조(메모리 주소)가 동일한지 확인.
• 데이터의 불변성 참고.
• === 연산자를 사용한 얕은 비교 예시.

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
const arr3 = arr1;

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

Shallow comparison in React

• React에서 컴포넌트의 렌더링 성능을 최적화하기 위해 => 불필요한 렌더링 방지를 위해 얕은 비교함.
• Deep comparison(깊은 비교)에 비해 비용이 적고, 속도가 빠르고, 효율적이지만 복잡한 객체나 중첩된 객체를 처리하지 못함.

// 예제1.
import React, { useState, useEffect } from 'react';

function ExampleComponent(props) {
  const [data, setData] = useState(props.data);
  useEffect(() => {
    // 얕은 비교를 통해 변경됨을 인지하고 업데이트.
    if (props.data !== data) {
      setData(props.data);
    }
    // [props.data]가 변경 될 때만 실행하지 않으면, 무한 루프가 될 가능성도 있음.
  }, [props.data]);

  return <div>{data}</div>;
}

// 예제2.
import React, { useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);
  // count state 변경 함수
  function handleClick() {
    setCount(count + 1);
  }
  // 중첩이 있는 복잡한 객체
  const myData = { name: 'Alice', age: 25, address: { city: 'New York', state: 'NY' } };

  return (
    <div>
      <p>You clicked the button {count} times</p>
      {/* 버튼 클릭시 handleClick에 의해 count state 변경되고, React 재렌더링 */}
      <button onClick={handleClick}>Click me!</button>
      <p>
        Name: {myData.name}, Age: {myData.age}
      </p>
    </div>
  );
}

---