React와 Virtual DOM 완전 정리

DOM이 무엇인지부터, 리액트가 왜 Virtual DOM을 쓰는지, 성능 최적화를 어떻게 하는지까지

1. DOM이란?

**DOM (Document Object Model)**은 HTML을 브라우저가 이해할 수 있도록 구조화한 트리 형태의 객체 모델입니다.

<body>
  <h1>제목</h1>
  <ul>
    <li>아이템1</li>
    <li>아이템2</li>
  </ul>
</body>

→ 브라우저 내부 구조:

Document
 └─ body
     ├─ h1
     └─ ul
         ├─ li
         └─ li

브라우저는 단순히 HTML을 읽는 것이 아니라 다음과 같은 과정을 거쳐 화면을 렌더링합니다.

💡 DOM 변경이 생기면 위의 과정 중 Layout → Paint가 다시 실행됨 → 성능 저하