Javascript에서의 동등 비교 (react 의존성 배열)

react 개발자라면 react hook을 다루면서 의존성 배열을 사용해본 경험이 있을것이다.

예를 들어 flag 라는 값이 변경 할 때 마다 특정 함수를 실행하고 싶은 경우 아래 처럼 코드를 작성할 것이다.

useEffect(() => {
  toDoFunc();
}, [flag])

 

여기서 의존성 배열이 어떤식으로 작동하는지, 어떤 값들을 넣어야 하는지 이해하고 사용할 필요가 있다.

 

렌더링에서도 비슷한 예를 볼 수 있는데 react의 컴포넌트는 props값이 바뀌면 다시 렌더링 되는 특징을 가지고 있다.

아래 처럼 FlagComponent에 flag값을 props로 넘겨준다면 flag 값이 변경 될 때 해당 컴포넌트가 다시 렌더링 될 것이다.

return (
  <FlagComponent flag={flag}>
)

위의 예시들의 작업이 일어나는 방식은 자바스크립트의 동등 비교를 기반으로 한다.

---

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

javascript는 크게 두가지의 타입으로 나눠진다.

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

각각의 타입에 대한 내용은 이 글에서 다루지 않지만 나중에 여건이 되면 다른 포스팅에서 다루고자 한다.

 

간단하게 객체가 아니면 모두 원시 타입이다.

 

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

위에서 설명한 내용들에 대한 답이 여기에 있다.

 

원시 타입은 할당되는 시점에 메모리 영역을 차지하고 불변한 값의 형태로 저장된다.

let firstValue = "hello world";
let secondValue = firstValue;

console.log(firstValue === secondValue); // true

firstValue와 secondValue의 값을 비교하면 "hello world" 값이 secondValue에 복사됐기 때문에 true가 출력된다.

 

let firstValue = "hello world";
let secondValue = "hello world";

console.log(firstValue === secondValue); // true

같은 값을 할당했을 때도 똑같은 결과를 얻을 수 있다.

 

객체 타입의 경우에는 어떨까?

객체 타입은 원시 타입과 달리 변경 가능한 값의 형태로 저장된다. 복사를 할 때에도 값이 아닌 참조를 가리키기게 된다.(얕은 복사)

const first = {
  value: "hello world",
};

const second = {
  value: "hello world",
};

console.log(first === second); // false
console.log(first.value === second.value); // true

위 코드의 결과를 보면 알 수 있듯이 같은 값을 할당했을지라도 참조가 다르기 때문에 객체를 비교하면 false를 출력한다.

하지만 객체내 value를 비교하면 같은 값을 가지기 때문에 true가 출력된다.

 

React에서의 동등 비교

react에서는 ==, === 연산이 아닌 Object.is 를 사용하여 비교를 한다.

"1" == 1 // true
"1" === 1 // false
Object.is("1", 1) // false

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

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

 

위 코드 블록을 통해 확인 할 수 있듯 Object.is는 ==, === 연산에서 다루지 못하는 몇 가지 케이스들이 추가되어 동작한다.