DOM 요소부터 React의 Diffing까지:
React 앱이 실제 브라우저에 어떤 식으로 화면을 그리는가?
그리고 DOM과 관련된 처리 과정이 어떤 순서로 일어나는가?
1. HTML과 DOM
- HTML은 웹페이지를 구성하는 **문서(Text)**일 뿐이다.
- 브라우저는 이 HTML을 파싱해서 DOM(Document Object Model) 이라는 트리 구조로 변환한다.
- DOM은 쉽게 말하면 계층을 가진 트리 형태이다. (트리는 소위 말하는 부모 자식이 존재하는 구조인데)
- 우리가 쓰는 자바스크립트로 자식을 찾고 부모를 찾고 하는 것 ( DOM 조작이 가능해진다)
- DOM은 각 HTML 요소들을 **노드(Node)**로 표현하며, 트리처럼 부모-자식 관계를 가진다.
<body>
<h1>Hello</h1>
<p>안녕하세요</p>
</body>
document
└── body
├── h1 → "Hello"
└── p → "안녕하세요"
- 참고로 브라우저의 렌더링 과정도 알고가면 좋다 (실제 브라우저 렌더링 과정은)
HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree
Render Tree → Layout → Paint → Screen
2. React에서 JSX로 컴포넌트 작성
- React에서는 HTML과 유사한 문법인 JSX를 사용하여 UI를 작성한다.
- 이 JSX는 실제 HTML이 아니라, 자바스크립트 객체로 변환될 수 있는 표현이다.
- JSX는 우리가 컴포넌트를 만들때 아래 return 값 내부에 있는 코드들을 의미한다.
- JSX는 HTML 처럼 보이지만 HTML이 전혀 아니며, 자바스크립트 객체로 변환되는 것!
const MyComponent = () => {
return (
<div>
<h1>안녕</h1>
<p>리액트입니다</p>
</div>
);
};3. Babel: JSX → JavaScript로 변환
- 브라우저는 JSX를 이해하지 못하므로, Babel이 이를 변환해준다.
- 쉽게 말하면 브라우저는 Javascript만을 이해한다.
- 그러기에 변환하는 과정이 필요한 것
<h1>Hello</h1>➡ Babel 변환 결과:
React.createElement('h1', null, 'Hello');즉, 우리가 JSX로 작성한 코드는 내부적으로 React.createElement 호출로 바뀐다.
4. Virtual DOM 생성
- React는 이 JSX로부터 Virtual DOM(가상 DOM) 을 만든다.
- 이는 실제 브라우저의 DOM과 구조는 같지만, 메모리 상에 존재하는 자바스크립트 객체 트리이다.
- 즉 실제 DOM과는 구별을 해야한다.
- 우리가 JSX를 바꾸면, React 자체 내부에서 가상 DOM을 만들고, 이전 가상 DOM과 바꾼 새로운 DOM을 비교하는 것이다.
- 이후 바뀐 부분만 실제 DOM에 최소한으로 반영하는 것이다.
5. 초기 렌더링: Virtual DOM → 실제 DOM
- React는 Virtual DOM을 기반으로 실제 DOM을 생성하여 브라우저에 표시한다.
- 이 과정은 초기 렌더링(mounting)이라고 부른다.
6. 업데이트 시: Diffing Algorithm 작동
- 상태 변화 등으로 인해 컴포넌트가 다시 렌더링될 때:
- 새로운 JSX → 새로운 Virtual DOM 생성
- 이전 Virtual DOM과 비교 (Diffing)
- 바뀐 부분만 실제 DOM에 반영 (최소 단위 변경)
// 이전
<h1>Hello</h1>
// 이후
<h1>Hello, world!</h1>➡ React는 "텍스트가 바뀌었네?" 하고 해당 텍스트 노드만 바꾼다.
7. 완전히 새로운 컴포넌트일 경우
- 만약 <ComponentA /> → <ComponentB />로 바뀌면?
- React는 컴포넌트 이름이 다르면 완전히 다른 것으로 판단하고, 비교하지 않고 새로 렌더링한다.
✅ 요약 순서
- HTML은 DOM이라는 트리 구조로 변환됨
- React는 JSX로 컴포넌트를 정의하고 Babel이 이를 JS로 변환
- React는 Virtual DOM을 만들고 실제 DOM과 동기화함
- 상태 변경 시 Diffing을 통해 변경된 부분만 업데이트
➡ 이 모든 덕분에 React는 빠르고 효율적인 UI 업데이트가 가능하다!
필요하다면 useRef로 직접 DOM을 제어하거나, React.memo, key를 통해 디핑 최적화도 가능하다.