DOM이 대체 뭐예요?

먼저 한 줄 정의부터. DOM은 브라우저가 HTML을 읽어서 메모리에 만들어 놓은, 웹페이지의 "객체 구조(트리)"예요. 이 문장이 지금은 낯설어도 괜찮아요. 차근차근 풀면 마지막엔 당연하게 들려요.

<h1>안녕하세요</h1>
<button>버튼</button>

우리 눈엔 화면처럼 보이지만, 파일 자체는 그냥 문자(텍스트) 나열이에요. 이 상태로는 제목을 바꾸거나 버튼을 누르는 "조작"이 안 돼요. 그냥 글자니까요.

프로그램이 실행되면 컴퓨터는 메모리(RAM)에 데이터를 저장해요. let age = 30; 이라 쓰면, 메모리 어딘가(예: 100번 주소)에 30이 저장되고 age는 그 위치를 가리키는 이름이에요. (자바 메모리 편에서 본 "변수 = 값이 담긴 자리를 가리키는 이름"과 똑같아요 — [메모리 개념] 부록 참고.)

그런데 사람 한 명을 표현하려면 이름·나이·키처럼 여러 값이 필요해요. 따로따로 변수로 두면 관련 있는 데이터인데 흩어져서 불편하죠. 그래서 관련된 값들을 하나로 묶은 게 객체(Object)예요.

const person = {
  name: "홍길동",
  age: 30,
  height: 175
};

이제 핵심. 브라우저(크롬)가 HTML 글자를 읽으면, 각 요소를 객체로 바꿔서 부모–자식으로 연결된 나무(트리)를 메모리에 만들어요. 예를 들어 <h1 id="title">안녕하세요</h1>는 대략 이런 객체가 돼요(실제론 훨씬 복잡):

{
  tagName: "H1",
  id: "title",
  textContent: "안녕하세요"
}

DOM이 객체 트리니까, 자바스크립트가 그 안의 요소를 찾아서 바꿀 수 있어요.

const title = document.getElementById("title"); // DOM에서 id가 title인 객체를 가져와
title.textContent = "반갑습니다";                 // 그 객체의 textContent 값을 바꿔

getElementById("title")는 "DOM 안의 title 객체를 가져와"라는 뜻이고, title.textContent = "반갑습니다"는 그 객체의 글자 값을 바꾸는 거예요. 값이 바뀌면 브라우저가 "DOM이 바뀌었네" 하고 화면을 다시 그려요.

순수 자바스크립트는 요소를 하나하나 직접 찾고 바꿔야 해요. 버튼도 찾고, 제목도 찾고, 목록도 찾고… 화면이 커질수록 지옥이 돼요. 리액트는 이걸 대신 해줘요. 우리는 이렇게만 쓰면 됩니다.

<h1>{count}</h1>
// ... 그리고
setCount(count + 1);

setCount만 호출하면, React가 내부적으로 DOM 객체를 찾아 → 필요한 부분만 수정 → 화면 갱신까지 대신 해줘요. 그래서 "React = DOM을 직접 안 만지게 해주는 라이브러리"라고도 해요.