📚 DOM 구조는 자식의 중첩된 구조를 갖지 않는가?

1. DOM의 개념적 구조: 중첩된 트리(Tree)

HTML은 중첩을 통해 시각적 계층을 표현합니다:

<div>
  <h1>제목</h1>
  <p>
    <span>내용</span>
  </p>
</div>


- <div>는 <h1>, <p>의 부모
- <p>는 <span>의 부모
- **브라우저는 이를 트리 구조로 파싱**함
  

📌 이 구조는 부모 → 자식 → 자식의 자식으로 이어지는 계층적(트리) DOM 모델입니다.

---

2. DOM의 실제 데이터 구조: 평평한 자식 목록 (Flat List)

하지만 DOM 내부에서는 다음과 같이 작동합니다:

const div = document.querySelector('div');
console.log(div.children); // => HTMLCollection(2) [ <h1>, <p> ]

• div.children은 오직 직속 자식만 포함
• span은 포함되지 않음 (손자이기 때문)
• 즉, 자식 목록은 항상 1차원 배열 구조

❗ DOM은 2차원 배열 같은 중첩 구조를 갖지 않음

---

3. 왜 React는 자식 노드를 평탄화(flatten)해야 하는가?

React는 JSX와 JS로 UI를 기술하는데, 이는 종종 중첩 배열을 만들어냅니다:

<ul>
  {[
    <li>1</li>,
    [<li>2</li>, <li>3</li>],
    <li>4</li>
  ]}
</ul>

• 위 구조는 JS에서는 합법이지만, DOM에서는 비합법
• DOM은 ul 태그의 자식이 평평한 리스트여야 함

🔧 그래서 React는 createElement 호출 시 자식들을 자동으로 평탄화 처리합니다.

React.createElement('ul', null, ...flatten(children));

---

4. 요약

• DOM은 개념적으로는 트리이지만, 실제 자식 관리는 1차원 목록
• React는 JSX가 생성한 중첩 배열을 평탄화하여 DOM과 호환시킴
• 이 구조적 이해는 직접 렌더러나 가상돔을 구현할 때 핵심