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

2024. 12. 20. 22:35·React
🔑나와 다른 사람을 비교하는 것은 젓가락과 숟가락을 비교하는 거랑 다를 바 없다

💡 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);
  }
);
저작자표시 비영리 변경금지 (새창열림)
'React' 카테고리의 다른 글
  • React에서의 DOM 비교 최적화: Virtual DOM과 휴리스틱 알고리즘
  • [React] 클래스, 함수, 화살표 함수 컴포넌트와 children 활용법 완벽 정리🚀
  • HTML5 뭐가 달라진거죠? 어떤 특징이 있나요?
  • 아직도 고민하시나요? 선택이 아닌 필수‼️타입스크립트 Typescript .tsx
Jelong
Jelong
커스텀 웹: https://jaehong-park.com Github: https://github.com/qkrwoghd04
  • Jelong
    24/7 Developer's Note
    Jelong
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Software Engineering
      • Ubuntu
      • Network
      • JavaScript
      • Web
      • Interaction Design
      • React Native
      • React
      • Algorithm
      • Java
      • Database design
      • IT Trend
      • TroubleShooting
      • AWS
      • Interview
      • LG CNS AM CAMP 1기
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    heap
    자바스크립트
    소프트웨어 공학
    AWS
    html
    화이트 박스 테스트
    GPT-4
    typescript
    css
    Queues
    알고리즘
    티스토리챌린지
    이진트리
    prototyping
    블랙 박스 테스트
    React
    자바
    JS
    오블완
    미니넷
    javascript
    ChatGPT
    java
    데이터 구조
    BST
    expo
    generic
    알고리즘 분석
    frontend
    mininet
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
Jelong
React의 동등 비교 == , ===, Object.is 그리고 React.memo와의 상관 관계
상단으로

티스토리툴바