1. 개념 요약

DOM(Document Object Model)은 HTML이나 XML 문서를 브라우저가 구조화하여 표현한 객체 모델이다. 브라우저는 HTML을 읽고 DOM을 생성하며, 자바스크립트를 통해 DOM을 조작함으로써 웹 페이지의 동적인 변경이 가능해진다.

2. 배경 지식

• Next.js: SSR(Server Side Rendering)을 지원하여 React의 CSR(Client Side Rendering) 단점을 보완함.

  → SEO에 유리함 (자바스크립트가 실행되기 전에도 HTML을 렌더링하기 때문).

• React: 사용자 인터페이스를 구성하는 라이브러리.

  → 컴포넌트를 기반으로 하며 JSX를 사용하여 Virtual DOM을 생성.

• Virtual DOM: Virtual DOM(가상 DOM)은 실제 웹 브라우저의 DOM(Document Object Model)을 효율적으로 업데이트하기 위해 사용되는 메모리 내의 가벼운 DOM 사본이다.

  • 부가 설명

3. 상세 설명

DOM 구성

• HTML → DOM

  HTML 문서를 파싱하여 DOM 트리를 구성한다.

• CSS → CSSOM (CSS Object Model)

  CSS 파일 역시 파싱되어 별도의 객체 트리로 구성된다.

• DOM + CSSOM → Render Tree 생성

  • Render Tree는 실제 화면에 그려질 요소만 포함.
  • display: none 등은 제외된다.

브라우저 렌더링 과정

1. DOM/CSSOM 생성

   HTML/CSS를 파싱하여 각각 DOM과 CSSOM 트리를 생성한다.

2. Render Tree 생성

   DOM과 CSSOM을 기반으로 실제로 화면에 출력될 구조를 렌더 트리 형태로 구성.