[React] DOM & 렌더링 (Rendering)

DOM ( Document Object Model )

: 웹 페이지의 컴포넌트 구조 (= 태그) 를 트리(Tree) 형태로 표현한 모델

DOM 주요 용어
- 문서 (Document) : 웹 페이지 / 화면
- 요소 (Element) : 페이지 / 화면을 구성하는 컴포넌트
- 노드 (Node) : 트리의 각 요소

 

: 상위 Element 는 하위 Element 를 포함하고 있다.

---

렌더링 ( Rendering )

화면에 출력시킬 UI 컴포넌트를 구성하는 작업

 

종류

• 초기 렌더링
• 이후 렌더링 (= 리렌더링 ( Re-Rendering ))

렌더링 절차
1. 렌더링 트리거 ( Rendering Trigger ) - 렌더링 유발
2. 컴포넌트 렌더링 ( Component Rendering ) - 렌더링 수행
3. DOM 커밋 ( DOM Commit ) - 렌더링 결과 반영

가상 DOM ( Virtual DOM )
: 컴포넌트가 렌더링되었을 때 자동으로 생성되는 DOM 의 가상 복제본
: 브라우저가 아닌 메모리에서 관리된다.
: DOM 에 변경사항이 발생한 경우, 그 즉시 변경사항이 반영된 새로운 가상 DOM 을 생성한다.

 

초기 렌더링과 이후 렌더링의 절차 비교

	초기 렌더링	이후 렌더링 (리렌더링)
렌더링 트리거	화면에 처음 접근했을 때 발생한다. React 가 Document 에서 해당하는 컴포넌트를 createRoot() 으로 호출한 뒤 render() 를 호출한다.	컴포넌트의 props 또는 state 가 변경되었을 때 발생한다.
컴포넌트 렌더링	루트 (Root) 컴포넌트를 호출한다.	기존의 가상 DOM 과 변경사항이 반영된 가상 DOM 을 비교하여 변경된 Element 를 탐색한다. ( Diffing )
DOM 커밋	React 가 DOM 의 appendChild() 를 사용하여 컴포넌트를 화면에 출력한다.	기존 DOM 에서 변경된 Element 만 다시 출력한다. ( Reconciliation )