모던 리액트 Deep Dive - 자바스크립트의 동등 비교

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.1 자바스크립트의 동등 비교

리액트 코드의 기반이 되는 자바스크립트에 대해 먼저 알아보자!

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

• 자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 데이터 타입은 크게 원시타입과 객체타입으로 나눠진다.

💡데이터 타입

원시타입(private type)	객체타입(object/reference type)
boolean null undefined number string symbol bigint	object

💡참고할 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

표준 내장 객체 - JavaScript | MDN

1. 원시타입

• 객체가 아닌 모든 타입을 의미하며, 메서드를 갖지 않음

🌓 undefined

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

let foo
typeof foo === 'undefined' //true

funtion bar(hello){
	return hell0
}
typeof bar() == 'undefined' //true

• null과 undefined는 오직 각각 null과 undefined라는 값만 가질 수 있으며, 그 밖의 타입은 가질 수 있는 값이 두개 이상 (boolean의 true,false) 존재한다.

🌓 null

• 아직 값이 없거나 비어있는 값을 표현할 때 사용

typeof null === 'object' //true?

• null이 가지고 있는 특별한 것은 다른 원시값과 다르게 typeof로 null을 확인했을 때 해당 타입이 아닌 'object'라는 결과가 반환된다는 것

undefined : 선언되었지만 할당되지 않는 값
null : 명시적으로 비어있음을 나타내는 값

🌓 Boolean

• true와 false만을 가질 수 있는 데이터 타입 ( falsy와 truthy 값이 존재)
• 조건문에서 많이 쓰이는 데이터 타입

💡 falsy가 가능한 값의 실제 타입

값	타입	설명
false	Boolean	false는 대표적인 falsy한 값이다.
0,-0,0n,0x0n	Number, BigInt	0는 부호나 소수점 유무에 상관없는 falsy한 값이다.
NaN	Number	Number가 아니라는 것을 뜻하는 NaN은 falsy한 값이다.
'',"",``	String	문자열이 falsy하기 위해서는 반드시 공백이 없는 빈 문자열이어야 한다.
null	null	null은 falsy한 값이다.
undefined	undefined	undefined는 falsy한 값이다.

💡  truthy

• 조건문 내부에서 true로 취급되는 값
• 객체와 배열은 내부에 값이 존재하는 지 여부와 상관없이 truthy로 취급된다. 즉, {},[] 모두 truthy한 값

🌓Number

• 자바스크립트는 정수와 실수를 구분하지 않고, 모든 숫자를 하나의 타입에 저장

🌓 BigInt

• number가 다룰수 있는 숫자 크기의 제한을 극복하기 위해 출현

🌓 String 

• 텍스트 타입의 데이터를 저장하기 위해 사용
• 원시타입이며, 한번 문자열이 생성되면 그 문자열은 변경할 수 없음
• 백틱(``)을 사용한 문자열은 템플릿 리터럴이라고 하며, 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있다.

🌓 Symbol

• ES6에 추가된 타입이며, 중복되지 않는 고유한 값을 나타내기 위해 만들어짐
• Symbol을 생성하려면 반드시 Symbol()함수를 이용해서만 만들수 있다.
• 동일한 값을 사용하기 위해서는 Symbol.for를 활용함

const key = Symbol('key')
const key2 = Symbol('key')

key === key2 //false
Symbol.for('hello') === Symbol.for('hello') //true

2. 객체타입 (object type)

• 자바스크립트를 이루고 있는 대부분의 타입(배열, 함수, 정규식, 클래스 등)
• 참조를 전달한다고 해서 참조타입(reference type)으로도 불림

---

1.1.2 값을 저장하는 방식의 차이

원시타입과 객체타입의 차이점은 값을 저장하는 방식이 다르다는 점이다!

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

---

1.1.3 자바 스크립트 또 다른 비교 공식, Object.js

🌚 Object.js

• 자바스크립트에서 비교를 위한 방법이며, 두개의 인수를 받고 해당 인수가 동일할지 확인하고 반환하는 메서드이다.

Object.js가 ==나 ===와 다른점은 아래와 같다.

💡 == vs Object.js 

• == (동등 연산자) : 타입이 다르면 형 변환(type coercion) 후 비교
• Object.is() : 형 변환을 하지 않는다.

5 == '5' 와 같이 형변환 후에 값이 동일하다면 ==는 true를 반환하지만, Object.js는 형변환을 하지 않는다.
즉, ===와 동일하게 타입이 다르면 그냥 false이다.

💡 === vs Object.js 

• === (일치 연산자) : 타입 변환을 하지 않고 값과 타입을 동시에 비교
• Object.is() : ===와 유사하지만, 보다 더 정밀한 비교 (특히 NaN, +0 vs -0 구분할 때 필요)

-0 === +0 // true
Object.is(-0, +0) // false

Number.NaN === NaN // false
Object.is(Number.NaN, NaN) // ture

NaN === 0 / 0 // false
Object.is(NaN, 0 / 0) // true

※ Object.is() 사용시 주의해야 할 점 : 객체 비교에는 별 차이가 없다.

Object.is({}, {}) // false

const a = {
  hello: 'hi',
}
const b = a

Object.is(a, b) // true
a === b // true

---

1.1.4 리액트에서의 동등비교 

• 리액트에서 사용하는 동등비교는 Object.is()이며, ==나 ===가 아니다.

💡 리액트에서 실제로 값을 비교할 때 사용하는 코드

https://github.com/facebook/react/blob/main/packages/shared/objectIs.js

react/packages/shared/objectIs.js at main · facebook/react

//any는 어떠한 값도 받을 수 있는타입을 의미
function is(x: any, y: any) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) 
  );
}
//런타임에 object.js가 있다면 사용하고, 아니면 위 함수를 사용한다.
const objectIs: (x: any, y: any) => boolean =
  typeof Object.is === 'function' ? Object.is : is;

export default objectIs;

💡 shallowEqual

• objectIs를 기반으로 동등비교하는 함수이며, 의존성 비교등 리액트의 동급 비교가 필요한 곳에서 사용

https://github.com/facebook/react/blob/main/packages/shared/shallowEqual.js

react/packages/shared/shallowEqual.js at main · facebook/react

• 리액트에서는 Object.is로 먼저 비교를 수행한 후, Object.is에서 수행하지 못한 비교 즉, 객체 간 얕은 비교를 한 번 더 수행한다는 것을 알 수 있다. (객체 간 얕은 비교 : 객체의 첫 번째 깊이에 존재하는 값만 비교한다는 것)

// Object.is는 참조가 다른 객체에 대해 비교가 불가능
Object.is({ hello: 'world' }, { hello: 'world' }) // false

// shallowEqual은 객체의 1 depth까지는 비교 가능
shallowEqual({ hello: 'world' }, { hello: 'world' }) // true

// 그러나 2 depth까지 가면 이를 비교할 방법이 없으므로 false 반환
shallowEqual({ hello: { hi: 'world' } }, { hello: { hi: 'world' } }) // false

→ 객체 간 얕은 비교까지만 구현한 이유는 리액트는 JSX props는 객체이고,props만 일차적으로 비교하면 되기 때문