React - Virtual Dom & 라이프사이클

Dom

- DOM은 html 단위 하나하나를 객체로 생각하는 모델이다.

- 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있다.

- 이런 구조를 트리 구조라고 한다. -> DOM은 트리구조.

- DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다.

  → 필요없는 연산이 너무 많이 일어난다.

  → 이를 보완하기 위한것이 가상돔이다.

 

Virtual Dom

- 가상돔은 메모리 상에서 돌아가는 가짜 DOM.

- 가상돔의 동작 방식 

• 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교
• 바뀐 부분만 변경
• 돔 업데이트 

- 어떤 행동을 해야 DOM을 새로 그릴까?

• 처음 페이지 진입했을 때
• 데이터가 변했을 때

 

Dom과 Virtual Dom의 속도

- DOM은 사이트 구조에 따라 가상돔을 쓰는 것보다 훨씬 성능이 좋을 수 있고, 느릴 수 있다.