React의 동등 비교 == , ===, Object.is 그리고 React.memo와의 상관 관계

🔑나와 다른 사람을 비교하는 것은 젓가락과 숟가락을 비교하는 거랑 다를 바 없다

💡 Object.is란 무엇인가?

---

▶️ Object.is는 ES6에서 제공하는 기능으로 두 값이 같은 값인지 비교하는 메서드 입니다

==  ===와 비슷하지만, 몇 가지 특별한 동작을 추가로 처리합니다

❗️ Object.is의 특징: 

1. NaN은 NaN과 같다고 판단합니다 ( === 에서는 false 입니다)
2. +0 과 -0은 다르다고 판단합니다 ( === 에서는 true 입니다)

Object.is Table

▶️ 위 Table을 보면 더 자세하게 알 수 있습니다. 느슨한 비교와 엄격한 비교라고 부르기 보다는 얕은 비교, 깊은 비교라고 더 많이 부르는 것으로 알고 있습니다. 

💻 CODE

// 얕은 비교
const user = {name : "john"}
const other = {name : "john"}

console.log(user === other) //false

// 깊은 비교
const user = {name : "john"}
const other = {name : "john"}

const deepEqual = (obj1, obj2) => {
	return JSON.stringify(obj1) === JSON.stringify(obj2);
}

console.log(deepEqual(user, other)); // true;

하지만 객체 타입은 가지고 있는 Key, Value 값이 같다 하더라도 === 연산자로 비교를 진행하면 주소의 참조값를 비교하기 때문에 false를 반환하는 것을 볼 수 있습니다

💡 폴리필(Polyfill) 이란?

---

▶️ 폴리필은 특정 기능이 지원되지 않는 환경에서 그 기능을 대신 구현하는 코드입니다.

구형 브라우저 환경에서는 Object.is가 지원하지 않을 수 있습니다. ES6이 아닌 경우가 있기 때문이죠

React는 Object.is 동작을 재현하기 위해 폴리필을 사용합니다

💻 CODE

function is(x: any, y: any) {
	return (
    	(x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y)
    )
}

const objectIs(x: any, y: any) => boolean = 
	typeof Object.is === 'function' ? Object.is : is
    
export default objectIs;

우리가 React에서 Object.is를 사용하려하는데, ES6 이전의 환경이면 네이티브하게 Object.is를 사용할 수 없겠죠?

⬆️ 그래서 위에 코드는 typeof Object.is를 했을때 'function'이라는 값이 출력이 되면, 그대로 Object.is 사용하고, 아니면 자체적으로 구현한 is 함수를 사용한다는 것입니다

💡 React에서 Object.is의 사용

---

▶️ React의 memo는 기본적으로 Object.is를 활용한 얕은 비교를 수행합니다. 여기서 얕은 비교란 props 객체의 최상위 속성만 비교하는 것을 의미하고, 객체에서는 참조 비교를 뜻합니다 

▶️ React 내부적으로 Object.is는 다음과 같은 기능에서 사용됩니다

1️⃣ useState와 useReducer에서 상태가 바뀌었는지 판단

2️⃣ React.memo와 useMemo에서 props 변경 여부를 비교

💻 CODE

const MyComponent = React.memo(
  (props) => <div>{props.value}</div>,
  (prevProps, nextProps) => {
    // React.memo는 내부적으로 Object.is로 props를 비교
    return Object.is(prevProps, nextProps);
  }
);