React 에서의 props 비교는 객체의 얕은 비교를 기반으로 이루어짐.
이 외에도 VDOM, DOM, 컴포넌트 렌더링 여부, 변수, 함수, 메모이제이션 등 모든 작업은 자바스크립트의 동등 비교를 기반으로 함.
Object.is
인수 2개를 받고 이 인수들이 동등한지 확인하고 반환하는 메서드.
Object.is 가 ==, ===와 다른 점은 다음과 같다고 한다.
- == : 비교를 진행하기 전 타입이 다른경우 비교를 할 수 있도록 타입을 변환해 비교를 실시한다. Object.is는 그렇지 않다.
- === : 는 비슷하지만 좀 더 개발자가 기대하는 방향으로 정확하게 비교한다.
-0 === +0 // true Object.is(-0, +0) // false Number.NaN === NaN //false Object.is(Number.NaN, NaN) // true
이런 특징을 가지지만 객체를 비교할 때는 별 차이가 없다.
리액트의 동등 비교
리액트에서는 Object.is를 사용하고 있고 브라우저 호환성을 고려해 폴리필과 함께 사용한다.
Object.is를 기반으로 동등 비교를 위해 shallowEqual 함수를 만들어 리액트의 동등 비교가 필요로 하는 다양한 곳에서 사용한다.
코드를 따로 적지는 않지만 객체 Object.is수행 후 걸러내지 못 한 비교를 위해 한 번 더 객채간 얕은 비교를 진행한다.
즉, deps 1까지만 비교한다.
Object.is({hello: 'world', {hello: 'world'}) // false shallowEqual({hello: 'world', {hello: 'world'}) // true shallowEqual({hello: {hi: 'world'}}, {hello: 'world', {hi: 'world'}}) // false
왜 deps 1 까지만 비교할까?
jsx props는 객체이고 이 props만 일차적으로 비교하면 되기 때문이다.
리액트는 props에서 가져온 값을 가지고 컴포넌트를 렌더링 하기 때문에 일반적으로는 얕은 비교로 충분 하다는 것이다.
그렇기에 props에 다른 객체 값을 던져 준다면 예상치 못한 작동을 일으킬 수 있다.
재귀문을 통해 객체를 깊게 검사한다면 완벽한 검사가 이루어 지겠지만 객체가 얼마나 깊을지 모르고 성능에 악영향을 줄 수 있다.
정리
이런 특징을 잘 알고있다면 함수형 컴포넌트에서 사용되는 훅의 의존성 배열의 비교, useMemo와 useCallback의 필요성, 렌더링 최적화를 위해 필요한 React.memo를 올바르게 작동시키기 위해 필요한것을 이해할 수 있다.