React 의 의존성 배열의 얕은 비교

React는 이전 Props와 새 props를 Shallow equality 를 비교한다. 즉, 새 props와 이전 props 들의 참조가 동일한지 여부를 고려한다.

부모가 다시 렌더링될 때 마다, 새 객체나 배열을 생성하면 개별 요소가 각각 동일하더라도 React는 변경된 것으로 간주한다.

 

얕은비교

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

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

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

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

https://dori-coding.tistory.com/entry/React-%EC%96%95%EC%9D%80-%EB%B9%84%EA%B5%90%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B9%84%EA%B5%90%EC%9D%98-%EC%B0%A8%EC%9D%B4