[Language/JavaScript] 동등비교

필요성 / 중요성

리액트 컴포넌트 렌더링이 일어나는 중요 원인 중 하나가 props의 동등 비교에 따른 결과이다. JS에서의 동등비교가 일어나는 로직에 대해 잘 알고 있어야 렌더링 방지 및 렌더링 최적화 등의 기능을 올바로 활용할 수 있다.

---

데이터 타입 / 값을 저장하는 방식의 차이

원시 타입(primitive type)과 객체 타입(object/reference type)이 있는데, 객체를 제외한 모든 것들이 원시 타입에 속한다.
원시 타입은 불변 형태의 값으로 저장되고, 객체 타입은 변경 가능한 형태로 저장이 된다.
객체는 눈에 보이는 value가 동일하더라도 참조가 다르기 때문에 값이 같지 않다.
그러나 같은 value는 동일한 주소에 저장이 되기에 비교 결과가 같게 나온다.

const hello1 = {greet: 'hello, world'}
const hello2 = {greet: 'hello, world'}

hello1 === hello2 // false
hello1.greet === hello2.greet // true

---

값을 비교하는 방식

==는 js에서 자동으로 형을 변환시켜 비교하여 불완전하다
'5' == 5 //true
'5' === 5 // false

Object.is는 ===의 한계까지 극복하기 위해 만들어진 방법이지만 여전히 객체 비교에서는 한계를 가지고 있다.

---

리액트에서 값의 비교

객체간 비교를 좀 더 정확하게 수행하기 위하여 리액트에서 shallowEqual이라는 함수를 제공한다.
이 함수는 얕은 비교를 수행하는 로직을 가지지만 깊은 객체(객체 안에 또 다른 객체를 가질 때에)에 대해서는 비교를 수행하지 않는다.
기본적으로 리액트는 props에서 꺼내온 값을 기준으로 랜더링을 수행하기에 얕은 비교로 충분한 경우가 많다.

---

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