[React] 얕은 비교와 깊은 비교의 차이

1. 얕은 비교

기본 타입 데이터의 경우 값이 동일한지만 비교하고, 객체의 경우 참조만 비교한다.

그래서 객체를 state로 사용하게 될 경우 값이 같더라도 참조값이 다르기 때문에 재렌더링이 발생한다.

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };

console.log(obj1 === obj2); // false

2. 깊은 비교

얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다.

1️⃣ Object depth가 깊지 않은 경우 : JSON.stringify() 사용

2️⃣ Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true