자바스크립트의 동등 비교

:daisy_metal: 자바스크립트를 이루고 있는 대부분의 타입은 객체 타입(object type)이다. 객체 타입은 참조를 전달한다고 해서 **참조 타입(reference type)**이라고도 한다! (객체 타입에는 배열, 함수, 정규식, 클래스 등이 포함된다.)

원시 타입과 객체 타입의 값을 저장하는 방식의 차이

원시 타입(primitive type)?

boolean, null, undefined, number, string, symbol, biginit 등 객체 타입을 제외한 모든 데이터 타입을 의미

var hello = {
	name: 'leo.park',
}

var hi = {
	name: 'leo.park',
}

// hello 객체와 hi 객체는 동일한 내용을 가지고 있지만 서로 다른 참조를 가지고 있기 때문에 동등 비교를 하면 false
console.log(hello === hi) // false

// 하지만 원시값인 객체 내부의 속성값을 비교하면 동일한 것을 확인할 수 있다!
console.log(hello.name === hi.name) // true

→ 객체는 값을 저장하는게 아니라 참조를 저장하기 때문에 동일하게 선언했던 객체라 하더라도 저장하는 순간 다른 참조를 바라보기 때문에 false를 반환하는 것!(값이 같을지언정 참조하는 곳이 다르기 때문 🙂)

리액트에서 동등 비교가 중요한 이유

리액트의 핵심은 기존 가상 DOM과 사용자와의 인터렉션을 통해 변화된 가상 DOM을 신속하게 비교하여 변했다고 판단되는 DOM 노드만을 신속하게 찾아내어 리렌더링함으로써 사용자 경험을 향상시키는 것!

즉 리액트 컴포넌트의 렌더링이 일어나는 이유 중 하나가 바로 props의 동등 비교에 따른 결과이기 때문에 동등 비교는 리액트의 탄생 배경과 가장 밀접한 관련이 있다고 생각한다!

리액트 함수 컴포넌트와 훅을 반복적으로 작성하다 보면 의존성 배열(dependencies)에 대해 고민하게 되는데 이 또한 자바스크립트의 동등 비교와 관련이 있다.

결국 리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링할지를 판단하는 방법, 변수나 함수의 메모제이션 등 모든 작업은 자바스크립트의 동등 비교를 기반으로 한다!

리액트에서의 동등 비교 방식

리액트에서는 Object.is를 기반으로 동등비교를 하는 shallowEqual이라는 함수를 만들어서 사용

shallowEqual은 의존성 비교, 객체간의 얕은 비교 등 리액트의 동등 비교가 필요한 다양한 곳에서 활용

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

객체간의 얕은 비교 방식이란?

객체의 첫 번째 깊이에 존재하는 값만 비교한다는 것을 의미!