리액트를 공부해보기 전에 DOM이라는 구조를 전부터 이해해보고 싶었고 찍어보기 시작하면서 리액트에서는 Virtual DOM이라는 걸 사용해 변화에 맞게 바꾸어주는 것을 알게 되었다.
DOM이 그래서 뭔데?
브라우저가 HTML 문서를 이해할 수 있도록 만든 거라고 생각하면 된다. <html><head></head><body></body></html> 이런 태그로 웹 페이지가 만들어지면 브라우저는 이를 DOM이라는 트리 구조로 변환하게 된다. 트리라는 것은 이미 어떤 것인지 따로 알고 있긴하지만 간략하게 요약하면 다음과 같다.
가장 최상위에 존재하는 루트가 있고 그에 대한 자식 노드들로 이어져 있으며 이 때 자식 노드와 연결된 노드는 부모 노드라고도 부른다. 가장 최하위 단의 노드의 경우에는 자식 노드가 없을 것이고 이는 리프 노드라고도 한다.
즉, 흔히 알고 있는 태그들이 DOM이라는 형태의 트리 구조로 브라우저가 변환하면 태그들은 각각의 노드들이 되며 이로써 컴퓨터가 읽고 조작할 수 있는 형태로 되는 것이다.
<!DOCTYPE html>
<html>
<body>
<h1>안녕하세요!</h1>
<p>이것은 예제입니다.</p>
</body>
</html>이런 HTML 구조들이 DOM 트리 구조로 변환된다면
Document
└─ html (요소 노드)
├─ head (요소 노드)
└─ body (요소 노드)
├─ h1 (요소 노드)
│ └─ "안녕하세요!" (텍스트 노드)
└─ p (요소 노드)
└─ "이것은 예제입니다." (텍스트 노드)이런 형태의 노드로 띄게 되는 것이다.
사실 보여지지는 않았지만 DOM은 BOM보다 하위 모델이다. 즉, Document가 루트 노드로 보여지는 것처럼 보이지만 실질적으로는 Document 객체 위에 Window라고 하는 보다 더 상위 객체가 존재한다.
Window (최상위 객체)
├── Document (HTML 문서)
│ ├── DOM (HTML의 트리 구조)
│ └── HTML 태그, 텍스트 노드, 속성 노드 등
├── Navigator (브라우저 정보)
├── Location (URL 정보)
├── History (브라우저 기록)
└── Screen (화면 정보)
정리
DOM은 웹 문서를 컴퓨터가 읽고 조작할 수 있도록 HTML로 작성된 문서를 DOM이라는 트리 구조로 변환한다. DOM 트리 구조로 변환하게 되면 HTML 내에 작성된 태그들은 텍스트 노드, 속성 노드 등 노드라는 의미로 사용되어 계층 구조로 이어지게 된다.
DOM의 최상위 루트인 Document 객체보다 부모 노드인 Window라는 객체가 존재하며 이는 브라우저 환경 내에 존재하는 객체 모델이라 부르는 BOM 이라는 개념이 존재한다. 결과적으로 DOM은 결국 브라우저의 일부로써 동작하고 있다는 것을 알 수 있다.
'javascript > react' 카테고리의 다른 글
| state (0) | 2024.12.08 |
|---|---|
| props (0) | 2024.12.05 |
| JSX - style과 주석 (0) | 2024.12.05 |
| JSX - JSX가 무엇인지와 규칙 그리고 간단한 값 넣어보기 (0) | 2024.11.27 |