React - 얕은 비교, 깊은 비교

 

목차

• 얕은 비교
• 깊은 비교

 

얕은 비교

 

자바스크립트에서 얕은 비교는 원시값을 비교할 경우 값을 비교하나, 배열 객체 등 객체를 비교할때는 레퍼런스, 즉 참조값을 비교합니다.

 

그래서 자바스크립트에서는 같은 값을 가진 객체라도 얕은 비교를 하면 다르다고 판단할 수 있습니다.

 

const str1 = "hello"
const str2 = "hello"

if (str1 === str2) {
  console.log("string same") // string name
}

const obj1 = { number : 10 }
const obj2 = { number : 10 }

if (obj1 == obj2) {
  console.log("object same") // 출력 안됨
}

 

 

 

깊은 비교

 

객체를 비교할때 레퍼런스(주소)만 비교하는것이 아닌 객체의 값들을 비교하는 방식을 말합니다.

 

깊은 비교의 방법으로는 두 가지가 있는데

 

첫 번째는 JSON.stringify(). 객체의 깊이가 깊지 않은 경우 사용합니다.

const obj1 = { number : 10 }
const obj2 = { number : 10 }

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

 

객체의 깊이가 깊은 경우에는 lodash 라이브러리의 isEqual을 사용합니다. 객체의 깊이가 깊은 경우에는 JSON.stringify() 보단 lodash 라이브러리의 isEqual이 속도가 더 빠릅니다.

 

JSON.stringify()  v.s  Lodash.isEqual 벤치마킹

https://www.measurethat.net/Benchmarks/Show/4089/0/lodashisequal-vs-jsonstringify-equality-comparison-for