yceffort
commented
1 year ago 말씀하신 부분이 맞습니다. 정확히 확인하기 위해서는 리액트에서 사용하는 shallowEqual 에 대해서 확인해보셔야 합니다.
그리고 객체 비교에 대한 힌트가
에 있는데요. 위 코드 보시면 아시겠지만 언급하신 질문, 객체의 개별 필드를 비교하여 렌더링할지를 검사한다.. 가 나와 있는 것을 알 수 있습니다.
말씀하신 이 객체의 비교는 리액트 컴포넌트의 props가 기본적으로 아래와 같이 객체 구성이므로 , 이 경우에 많이 사용 됩니다.
<Hello a={a} b={b} />
// 는 아래와 같다.
React.createElement(a, {a, b})a와 b가 jsx 문법관점에서는 원시값이지만, 실제 자바스크립트에서는 객체 값으로 넘겨져 비교 되기 때문에 객체 비교(=1depth의 개별필드만 비교)를 사용하게 됩니다.
YumYumNyang
https://yceffort.kr/04,deep-dive-in-react-rendering
안녕하세요! 먼저 항상 좋은 글 남겨주셔서 감사드립니다! 덕분에 몰랐던 부분을 많이 알게 되는 것 같습니다 ^^
혹시 pure component와 같은 컴포넌트는 동등성을 유지하기 위해서 얕은 비교를 사용한다고 했는데요, 얕은 비교가 객체나 배열에 대해 수행이 될 경우 참조 값만 비교하는 것이 아닌가요? 아래 부분이 헷갈려서 질문드립니다! 그리고 기본 컴포넌트에서도 얕은 비교가 수행되는 것인지 궁금합니다!
즉 서로 다른 객체에 있는 모든 개별 필드를 검사하여 객체의 내용이 같은지 다른지 확인한다. 다시말해, obj1.a === obj2.a && obj1.b === obj2.b && ........를 수행하는 것이다.