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 패키지를 통해 리액트가 렌더링한다