deps [] 의존성 배열은 shallow compare (equal), deep equal 중 어떤 것을 할까?
의존성 배열은 기본적으로 shallow equal을 하게 된다. 왜 shallow compare만 하는지에 대한 정확한 이유를 찾기는 힘들었다. 다만 Dan Abramov의 트위터를 보았을 때, 아마도 굳이 deep equality까지 체크할 필요가 없기 때문 아닐까 조심스럽게 추측해본다.
Deep equality checks are generally a bad idea. If the inputs are shallow enough that you think deep equality would still be fast, consider just using [JSON.stringify(obj)] instead. Note it won’t compare functions.
출처 : @dan_abramov Twitter
shallow compare
- equality를 체크하는 것이다.
- primitive types :
값을 비교한다. - object (reference) types :
attribute를 비교하지 않고 reference를 비교한다. object는 레퍼런스만 체크하기 때문에 같은 값이 들어있는 object이더라도 항상 다른 값으로 체크하게 된다.
중첩되어 있는 객체는 성능에 영향을 미친다. 따라서 deep compare는 무의미하다고 볼 수 있다. 그럼에도 불구하고 deep compare가 필요한 경우 shouldComponentUpdate를 적용해 볼 수 있다.
참고
https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react
https://stackoverflow.com/questions/54095994/react-useeffect-comparing-objects
