[모던 리액트 딥다이브] 1.1장 자바스크립트의 동등 비교

자바스크립트의 데이터 타입

• 원시 타입 
  • boolean
  • null
  • undefined
  • number
  • string
  • symbol
  • bigint
• 객체 타입
  • object

 

 

undefined

• 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값
• '선언됐지만 할당되지 않은 값'

 

null

• 아직 값이 없거나 비어 있는 값을 표현할 때 사용
• '명시적으로 비어 있음을 나타내는 값'

 

string

• 문자열은 원시 타입이며 변경 불가능함

 

Symbol

• 중복되지 않는 어떠한 고유한 값을 나타내기 위해 사용
• Symbol() 함수를 이용해서만 만들 수 있음

 

 

객체 타입

• 원시 타입 이외의 모든 것의 타입
• 배열, 함수, 정규식, 클래스 등 포함
• 참조를 전달한다고 해서 참조 타입이라고도 함

 

 

값을 저장하는 방식의 차이

• 원시 타입
  • 불변 형태의 값으로 저장
  • 값은 변수 할당 시점에 메모리 영역을 차지하고 저장됨
• 객체 타입
  • 프로퍼티를 추가, 삭제, 수정할 수 있으므로 원시 값과 다르게 변경 가능한 형태로 저장
  • 값을 복사할 때 값이 아닌 참조를 전달
  • 객체는 값을 저장하는 것이 아니라 참조를 저장함

// 원시 타입 동등 비교

let hello = 'hello world'
let hi = hello

console.log(hello === hi) // true;


// 객체 타입 동등 비교

var hello = {
	greet : 'hello world',
}

var hi = {
	greet : 'hello world',
}

console.log(hello === hi); // false
console.log(hello.greet === hi.greet); // true

 

 

Object.is

• 자바스크립트에서 제공하는 비교 메서드
• 두 개의 인수를 받아 이 인수 두 개가 동일한지 확인하고 반환하는 메서드
• 동등 비교 ===가 가지는 한꼐를 극복하기 위해 만들어짐
• 하지만 객체 비교에서는 자바스크립트의 특징으로 인해 ===와 동일하게 동작함

==	Object.is
같음을 비교하기 전에 같은 타입이 아니라면 비교할 수 있도록 강제로 형변환을 한 후에 비교함	형변환 하지 않고 타입이 다르면 false
===	Object.is
+0 === -0  : true Number.NaN === NaN  : true NaN === 0 / 0 : false	+0 === -0  : false Number.NaN === NaN  : false NaN === 0 / 0 : true

 

 

리액트에서의 동등 비교

• 리액트가 사용하는 동등 비교는 Object.is를 기반으로 하는 shallowEqual 함수를 만들어 사용함
• 먼저 Object.is로 먼저 비교를 수행한 다음에 Object.is에서 수행하지 못하는 비교, 즉 객체 간 얕은 비교를 한 번 더 수행함
• 객체 간 얕은 비교란 객체의 첫 번째 깊이에 본재하는 값만 비교한다는 것
• 객체의 얕은 비교까지만 구현한 이유는 JSX props만 일차적으로 비교하면 되기 때문임