[JS & React] 얕은 비교(Shallow Equal)란 ? / 리액트에서 컴포넌트가 리렌더링되는 경우

1) 얕은 비교

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

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

원시 타입 데이터의 경우 '값'이 동일한지만 비교하고, 배열과 객체과 같은 참조 타입 데이터의 경우 '참조값'만 비교한다.

 

2) 깊은 비교

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

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

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

 

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

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

 

3) 얕은 비교를 언제 사용하는가 ?

1. React.memo()에서 props를 비교할 때

2. React에서 Node를 비교할 때

 

4) 리액트에서 컴포넌트가 리렌더링 되는 경우 ⭐️

• state의 변경되었을 때
• props가 변경되었을 때
• 부모 컴포넌트가 렌더링 될 때
• shouldComponentUpdate 에서 true가 반환될 때
• forceUpdate가 실행될 때