[React] 가상 DOM과 렌더링 원리

가상 DOM과 렌더링 원리

리액트가 왜 빠른지, 그리고 우리가 개발자 도구에서 목격하는 "깜빡임"의 정체가 무엇인지 파헤쳐 봅니다.

---

1. 초기 렌더링 (The Initial Render)

처음 웹사이트에 접속하면 리액트는 전체 컴포넌트 트리를 훑으며 가상 DOM 스냅샷을 찍습니다. 그리고 이 설계도대로 실제 빈 HTML의 <div> 안에 내용을 꽉 채워 넣습니다.

❖ 초기 단계:

• 실제 DOM: 텅 비어 있음 (<div id="root"></div>)
• 가상 DOM: 컴포넌트 트리 전체 구조를 메모리에 생성
• 결과: 가상 DOM 전체가 실제 DOM으로 뿅! 하고 나타남

---

2. 컴포넌트 재실행과 가상 DOM의 비교

사용자가 버튼을 클릭해서 counter 값이 바뀌면 리액트가 다시 움직이기 시작합니다. 단순히 화면을 바꾸는 게 아니라 내부적으로 정교한 비교 과정을 거칩니다.

❖ 비교 프로세스:

• 새 스냅샷 생성: 상태가 변한 컴포넌트를 다시 실행해서 새로운 가상 DOM 스냅샷을 생성
• Diffing (비교): 리액트가 "이전 스냅샷"과 "새 스냅샷"을 1:1로 비교 (마치 '틀린 그림 찾기'와 같음)
• 최소 변경 사항 도출: "다른 건 그대로인데 <span> 안의 숫자만 5에서 6으로 바뀌었네?"라고 딱 그 부분만 찾아냄

---

3. 실제 DOM 업데이트 (Reconciliation)

리액트가 영리한 이유는 바로 이 지점입니다. 전체 페이지를 다시 그리는 대신, 찾아낸 그 '차이점'만 실제 DOM에 적용합니다.

• 비효율적 방식: 전체 HTML을 싹 지우고 새로 쓰기 (브라우저 부하 가중)
• 리액트 방식: 딱 <span> 요소의 텍스트 노드만 교체 (사용자가 느끼지 못할 정도로 빠름)

개발자 도구에서 "해당 요소만 깜빡이는 현상"이 바로 리액트가 최소한의 일만 하고 있다는 증거입니다!

---

4. 왜 실제 DOM을 직접 안 쓰나요?

실제 DOM은 브라우저 화면을 그리는 복잡한 정보(스타일, 레이아웃 등)를 다 가지고 있어서, 하나만 건드려도 브라우저가 계산을 다시 해야 합니다.

❖ 가상 DOM의 장점:

• 속도: 자바스크립트 객체일 뿐이라 메모리 안에서 수만 번 비교해도 엄청나게 빠름
• 전략: "메모리에서 신나게 비교하고, 결론만 실제 DOM에 딱 한 번 알려주는" 효율적인 방식

---

💡 요약 정리

단계	설명
함수 실행 $\neq$ 업데이트	함수가 실행된다고 해서 무조건 화면이 바뀌는 건 아님
가상 DOM	메모리에 존재하는 가벼운 복사본 설계도
Diffing	이전 설계도와 새 설계도의 차이점 찾기
업데이트	바뀐 부분만 실제 DOM에 '수술'하듯 집어넣기

---

결론

리액트는 단순히 UI를 그리는 라이브러리가 아니라, 최소한의 변경으로 최적의 경험을 제공하는 전략가입니다. 가상 DOM이라는 완충 지대를 두어 브라우저의 부담을 덜어주는 것이 그 핵심입니다.