🌒 DOM

목표 :

• DOM ?
• Physical DOM, Virtual DOM ?

💫 Dynamic HTML - DHTML

---

1997 MS DHTML 기술 발표

Static HTML - SHTML 방식 :
→ User에게 보일 HTML을 서버에서 생성하여 보냄
→ → 문서의 구조/데이터가 변하지 않는 것들 (I.E. 회사 정보, 메뉴 등)

Dynamic HTML - DHTML 방식 :
→ Browser에서 JS를 통해 동적으로 HTML 문서 생성
→ Browser가 HTML 파일을 Parsing 하여 JS 객체 구조 (개발자 도구 누르면 나오는) 생성
→ 상속 관계로 설계한 DOM 타입 JS 객체를 생성하는 방식
→ → 문서의 구조/데이터가 동적으로 변하는 것들 (= 현대 거의 모든 웹 페이지)

@ → React, DHTML

💫 Document Object Model - DOM

---

HTML Tag를 개체/요소로서 보고,
요소 라벨링하고, 요소 간의 관계를 Tree로 만듦

왜 Why? 단순 HTML 텍스트로는 특정 요소를 검색하기 어려움
→ DOM으로 만들면 특정 요소를 JS로 쉽게 접근/변경할 수 있음

@ CSS Object Model - CSSOM
@ → CSS 클래스를 개체로서 보고 … @ DOM + CSSOM => Render Tree

div, h1 같은 HTML Tag,
JS 코드 관점에서는 (~ 클래스 = DOM)의 인스턴스

div : (HTMLDivElement 클래스 = DOM)의 인스턴스, DOM 객체
h1 : (HTMLHeadingElement 클래스 = DOM)의 인스턴스, DOM 객체

DOM (Tree) Structure - DOM (트리) 구조
DOM 객체가 이루는 부모/자식 형태의 Tree Structure

Rendering
브라우저가 HTML → Parsing → JS DOM (트리) 구조 만드는 과정
참고 : 웹 브라우저

💫 Physical DOM - 물리 DOM, Virtual DOM - 가상 DOM

---

@ U 중간고사 출제 : 물리DOM & 가상DOM

React (Native) Framework 한정

Physical DOM, Virtual DOM

Physical DOM
→ 브라우저에서 JS가 생성하는 실제 DOM 구조

Virtual DOM
→ 리액트 코드가 생성한 JS 객체 구조
→ DOM Node Tree를 복제한 JS 객체

리액트가 특정 시점에 Virtual DOM 구조를 Physical DOM 구조로 변환
Renderer 패키지를 통해 리액트가 렌더링한다