React Virtual DOM 비교 커밋 원리와 얕은 비교

 

React Virtual Dom

과거에 React는 Virtual Dom을 사용하여 브라우저가 렌더링할 때, 이전 Dom과 현재의 Dom에서 변경내역을확인하여 실제 Dom에 반영할 부분을 결정한다.

 

이 때, 여기에서 궁금증이 들었다. 

가상돔은 새로운 돔의 커밋 내역을 어떤 기준으로 확인하여 변경 내역을 비교하는 것일까?

 

 

정답은 얕은 비교이다.

React는 노드를 비교할 때 얕은 비교를 한다.

React의 얕은 비교는 같은 레벨에서만 일어난다.

 

• 숫자, 문자열, boolean과 같은 원시 자료형은 값 비교를 수행한다.
• 배열, 객체 등 참조 자료형은 그 안의 값 혹은 attribute를 비교하지 않고, 그들의 레퍼런스(참조되는 위치)를 비교한다.

실제로 React는 상태 값을 업데이트할 때에도 얕은 비교를 수행한다.

그러므로 배열을 직접 수정하는 방식 즉 push, pop과 같은 메소드로 배열을 수정한 뒤, setState에 담아주어도 기본적으로 같은 참조 위치를 가지고 있기 때문에 값의 변화를 감지하지 못한다.

 

따라서 원본을 수정하는 메소드인 push(), pop()과 같은 메소드를 사용하여 원본을 직접 수정하는 것은 React에서는 지양하고 assign() 메소드를 사용하거나 전개구문을 사용하여 복사한 다음 값을 수정하여 그 객체나 배열을 setState에 담아주어야 한다.