profile
JBlog

DOM 정의

notion image
DOM은 문서(HTML/XML)를 브라우저가 이해할 수 있도록 트리 구조로 표현한 것.
각 HTML 태그(<h1>, <div> 등)는 DOM에서 Node라는 객체로 변환된다.
 
notion image
이 그림은 DOM에 포함된 <p> 태그를 더 자세히 본 그림이다.
<p>태그에도 자식 노드들과 속성들이 트리 형태로 자료 구조를 형성하고 있는 것을 알 수 있다.
DOM 객체에 먼저 접근하고 또 키워드를 통해서 필요한 노드에 접근할 수 있다.
 

정적 생성

문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있다.
우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것이다.
이런 과정을 정적으로 문서 객체를 생성한다고 말한다. 
<h2>Hello DOM</h2>

장점

  • 단순하고 직관적: HTML 파일에 바로 태그를 작성하므로 코드 이해가 쉽다.
  • 빠른 렌더링: 브라우저가 HTML을 읽으면서 즉시 DOM을 구성하므로 성능상 빠르다.
  • 검색엔진 최적화(SEO)에 유리: HTML에 바로 존재하기 때문에 크롤러가 내용을 쉽게 읽을 수 있다.
  • JS가 꺼져 있어도 표시 가능: 클라이언트가 자바스크립트를 지원하지 않아도 보인다.

단점

  • 재사용성 낮음: 같은 구조를 반복적으로 만들려면 매번 HTML에 적어야 함.
  • 조건부 렌더링 어려움: 사용자의 입력, 서버 응답 등에 따라 다르게 보여주기 힘들다.
  • 런타임 제어 부족: 렌더링된 후에는 JS로 접근해서 수정해야 함.

동적 생성

반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있다.
이런 과정을 동적으로 문서객체를 생성한다고 한다. 
var header = document.createElement('h2');
var textNode = document.createTextNode('Hello DOM');
header.appendChild(textNode);
document.body.appendChild(header);

장점

  • 동적 제어 용이: 조건문, 반복문 등을 활용해 상황에 따라 문서객체를 자유롭게 생성 가능.
      • → 예: 채팅 메시지, 실시간 알림, API 응답으로 받은 리스트 렌더링
  • 재사용성: 함수로 묶어두면 필요할 때마다 여러 개 생성 가능.
  • 사용자 인터랙션 반영 가능: 버튼 클릭, 이벤트 발생 시 즉시 DOM 추가/삭제 가능.
  • 렌더링 최적화 가능: 초기에는 필요한 최소 DOM만 렌더링 후, 나중에 필요한 부분만 추가 생성.

단점

  • 코드 복잡도 증가: HTML에 바로 적는 것보다 가독성이 떨어진다.
  • SEO에 불리: 생성 시점에 따라 검색엔진이 내용을 제대로 읽지 못할 수 있음 (SPA 프레임워크들이 SSR을 도입하는 이유).
  • 초기 렌더링 지연: HTML 파싱 후 JS 실행이 완료되어야 화면에 보이므로 살짝 늦어질 수 있다.
 

SEO 관점에서,

React 같은 라이브러리는 초기에 브라우저에 껍데기 같은 최소한의 DOM만 내보내고,
그다음에 JS 코드가 실행되면서 화면을 채워 넣는 구조이다.
 
Next.js의 경우에는 서버가 React 컴포넌트를 실행해서 완성된 HTML을 미리 만들어서 내려준다.
브라우저가 받는 초기 HTML은 이미 DOM 트리가 채워진 상태이다.
 
따라서 SEO에 유리하다. 크롤러가 JS 실행 없이도 HTML 콘텐츠를 바로 읽을 수 있다.
브라우저가 JS를 다운로드 & 실행하면, 서버에서 내려온 DOM과 Virtual DOM을 “연결”하는 과정을 거침
→ 이게 Hydration.