본문 정리
리액트 컴포넌트의 렌더링이 일어나는 이유 중 하나가 바로 props의 동등 비교에 따른 결과다. 이는 객체의 얕은 비교를 기반으로 이뤄진다.
JS의 데이터 타입은 원시 타입과 객체 타입으로 나눠진다.
- 원시 타입: boolean, null, undefined, number, string, symbol, bigint
- 객체 타입: object
원시 타입은 메서드를 갖지 않는다.
undefined는 '선언됐지만 항당되지 않은 값'이고 null은 '명시적으로 비어 있음을 나타내는 값'으로 사용하는 것이 일반적이다.
정수와 실수를 구분해 저장하는 다른 언어와 다르게, 자바스크립트는 모든 숫자를 하나의 타입에 저장했었다. 현재는 BigInt가 추가되어 기존 number에서 저장할 수 없었던 큰 숫자도 저장이 가능하다.
자바스크립트 문자열의 특징은 원시 타입이며 변경 불가능하다는 것이다.
Symbol은 중복되지 않는 어떠한 고유한 값을 나타내기 위해 만들어졌다.
두 타입은 저장 방식에서 차이가 있다.
원시 타입은 불변 형태의 값으로 저장되며 값을 비교한다.
참조 타입은 프로퍼티를 삭제, 추가, 수정할 수 있으므로 변경 가능한 형태로 저장되며 값을 복사할 때도 값이 아닌 참조를 전달하게 된다.
Object.is
=== 와의 차이점
shallowEqual 함수
리액트에서 사용되는 props는 객체이고 여기에 있는 props만 일차적으로 비교하면 되기 때문이다.
참고 자료
-
숫자의 경우 약간 다른 의미 체계를 사용하여 서로 다른 두 가지 경우를 처리합니다. 첫 번째는 부동 소수점 0이 양수 또는 음수로 부호화 된다는점입니다. 이는 특정 수학 해를 나타내는 데 유용하지만, 대부분의 상황에서는 +0과 -0의 차이를 신경 쓰지 않으므로 엄격한 동등은 두 값을 동일한 값으로 취급합니다. 두 번째는 부동 소수점이 NaN이라는 숫자가 아닌 값의 개념을 포함하여 어떤 불분명한 수학 문제(예: 양의 무한대에 음의 무한대를 더함)에 대한 해를 나타내는 경우입니다. 엄격한 동등은 NaN을 다른 모든 값과 같지 않은 것으로 취급합니다. ((x !== x)가 true인 유일한 경우는 x가 NaN일 때입니다.)
-
react에서 shallowEqual() 함수를 이용한 얕은 비교에 관한 질문
아래에 shallowEqual소스코드를 분석해두었으니 참고해보시면 좋겠습니다. 원본 소스코드는 아래 링크를 확인해주세요
https://github.com/facebook/react/blob/8e2bde6f2751aa6335f3cef488c05c3ea08e074a/packages/shared/shallowEqual.js
