가상돔
-
React Virtual DOM 비교 커밋 원리와 얕은 비교Frontend/React 2023. 3. 25. 13:43
React Virtual Dom 과거에 React는 Virtual Dom을 사용하여 브라우저가 렌더링할 때, 이전 Dom과 현재의 Dom에서 변경내역을확인하여 실제 Dom에 반영할 부분을 결정한다. 이 때, 여기에서 궁금증이 들었다. 가상돔은 새로운 돔의 커밋 내역을 어떤 기준으로 확인하여 변경 내역을 비교하는 것일까? 정답은 얕은 비교이다. React는 노드를 비교할 때 얕은 비교를 한다. React의 얕은 비교는 같은 레벨에서만 일어난다. 숫자, 문자열, boolean과 같은 원시 자료형은 값 비교를 수행한다. 배열, 객체 등 참조 자료형은 그 안의 값 혹은 attribute를 비교하지 않고, 그들의 레퍼런스(참조되는 위치)를 비교한다. 실제로 React는 상태 값을 업데이트할 때에도 얕은 비교를 수..