공부를 하면서 개인적으로 궁금했던 부분을 해결하거나, 스터디를 통해 배운 내용을 정리합니다.

🔖 모던 자바스크립트 DeepDive

7.3 비교 연산자

• 비교 연산자 : 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

7.3.1 동등/일치 비교 연산자

• 동등/일치 비교 연산자 : 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.
  • 동등 비교(==) 연산자 : 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. ⇒ 느슨한 비교 ⇒ 예측하기 어려운 결과를 만들어냄 ⇒ 권장 X
    
  • 일치 비교(===) 연산자 : 좌항과 우항의 피연산자가 타입이 같고 값도 같은 경우에 한하여 true를 반환한다. ⇒ 엄격한 비교 → BUT -0 과 +0 비교 시 true를 반환함.
    

⇒ Object.is 메서드 : 예측 가능한 정확한 비교 결과 반환

→ -0 과 +0 비교 시 false를 반환함.

---

🔖 모던 리액트 DeepDive

Object.is

• 두 개의 인수가 동일한지 확인하고 반환하는 메서드

• 동등비교 ===가 가지는 한계를 극복하기 위해 만들어졌으나, 객체 간 비교에 있어서는 동일하게 동작

• == vs Object.is :

  • == : 같음을 비교하기 전에 양쪽이 같은 타입이 아니라면 비교할 수 있도록 강제로 형변환
  • Object.is : 타입이 다르면 그냥 false

• === vs Object.is : ===가 만족하지 못하는 특이한 케이스 비교 (양의 0, 음의0 비교 가능. NaN 비교 가능)

리액트에서의 동등 비교

• Object.is를 구현한 폴리필(Polyfill)을 함께 사용

  • 폴리필(Polyfill) : 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트

• objectIS 함수 : 리액트에서 값을 비교하는 함수

• shallowEqual 함수 : objectIS를 기반으로 동등 비교를 하는 함수. 의존성 비교 등에서 사용

⇒ Object.is로 비교 수행 → Object.is에서 수행하지 못하는 비교(객체 간 얕은 비교) 수행

❓리액트에서의 동등 비교시, 객체의 얕은 비교까지만 수행하는 이유

리액트에서 사용하는 JSX props는 객체이고, 리액트는 props에서 꺼내온 값을 기준으로 렌더링하기 때문에 얕은 비교로 충분하다.

❓얕은 비교, 깊은 비교

• 얕은 비교 : 두 값이 동일한 값인지를 확인하는 것이 아니라, 주어진 두 값이 정확히 동일한 객체를 참조하는지 여부를 확인하는 것

• 깊은 비교 : 두 객체의 내부 구조까지 비교하여 동등성 여부를 확인하는 것

useEffect 코드의 핵심도 *의존성 배열의 이전 값과 현재 값의 얕은 비교*이다.

• 리액트 : props에서 꺼내온 값을 기준으로 렌더링함. 값을 비교할 때 Object.is 기반의 얕은 비교를 수행.

  ← 깊은 비교를 진행할 경우, 객체 내의 객체가 몇 개까지 존재하는지 알 수 없기 때문

  ⇒ 재귀적으로 비교해야함

  ⇒ 성능에 악영향

  ⇒ 얕은 비교로 충분!
  

• useEffect : state와 props의 변화 속에서 일어나는 렌더링 과정 에서 실행되는 부수효과 함수

⇒ useEffect 훅 자체가 렌더링 과정과 연관이 있기 때문에, useEffect도 얕은 비교를 통해 값을 비교한다.