[React 까보기 시리즈] Virtual DOM이 자바스크립트 객체라고?

출처 : https://www.youtube.com/watch?v=2EbCEluOO9Y&t=11s 

 

 

VDOM과 React lifecycle 

VDOM 

프로그래밍 컨셉 - 메모리 상에 UI 관련된 정보를 띄우고, react-dom과 같은 라이브러리에 의해 실제 DOM과 sync를 맞춘다. (renderer 관여) 이 과정을 재조정(reconciliation)이라 부름. (reconciler 관여) 실제로 하면 가상보다 비용이 더 크기 때문에 가상으로 함. 

 

VDOM은 fiber node로 구성된 tree 형태 (더블 버퍼링 구조) 

• current
  
  • DOM에 mount된 fiber 
• workInProcess
  • render phrase에서 작업중인 fiber 
  • commit phase를 지나면서 current tree가 됨 

구현 상세 

• workInProcess tree는 current tree에서 자기 복제하여 만들어짐 (서로 alternate로 참조) 
• fiber는 첫번째 자식만을 child로 참고, 나머지 자식들은 서로 sibling으로 참조, 모든 자식은 부모를 return으로 참조 

컴포넌트 리렌더링: 컴포넌트 호출 후 그 결과가 VDOM에 반영이 됨. DOM에 mount되어 paint 하는것 아님! 

 

React lifecycle

• VDOM 재조정(reconcilation)하는 단계
  • element 추가, 수정, 삭제 -> WORK를 schedular에 등록 
    • WORK: reconciler가 컴포넌트의 변경을 DOM에 적용하기 위해 수행하는 일 
  • reconciler가 담당(reconciler설계 stack -> fiber로 바뀌면서 abort, stop, restart 즉 렌더링 우선순위 변경 가능. useTransation 등)

Commit phase

• 재조정한 VDOM을 DOM에 적용 & 라이프사이클 실행하는 단계 
  •  일관성을 위해 sync 실행. 즉, DOM 조작 일괄처리 후 리액트가 콜스택을 비워준 다음 브라우저가 paint 시작