💻 React 렌더링 방식과 Virtual DOM 개념 정복 (feat. 왕초보 위클리 페이퍼 #5)

안녕하세요! 개발자 꿈나무 엠디노입니다.
현재 '웹개발 풀스택' 과정을 훈련하고 있습니다.

 

이번 주차 위클리 페이퍼 주제는 리액트(React)의 마법 같은 성능의 비결,

렌더링 방식과 Virtual DOM입니다.

 

"리액트는 왜 화면을 바꿀 때 깜빡이지 않고 부드러울까?"
"가상 DOM은 도대체 어떤 원리로 작동하는 걸까?"

 

저와 같은 의문을 가졌던 분들을 위해,

7살 아이에게 설명하듯 아주 쉬운 비유와 코드로 정리해 보았습니다.

---

이전 포스팅 글은 아래 글을 참고해주세요!

💻 JavaScript 얕은 복사와 깊은 복사, var, let, const 비교 (feat. 왕초보 위클리 페이퍼 #4)

💻 JavaScript 얕은 복사와 깊은 복사, var, let, const 비교 (feat. 왕초보 위클리 페이퍼 #4)

 

 

각설하고 바로 시작하겠습니다.

---

⭐️ 위클리 페이퍼 주제

• 리액트가 렌더링하는 방식 (Render Phase vs Commit Phase)
• Virtual DOM(가상 DOM)의 정의와 사용 이유

 

1. 리액트의 렌더링 방식 (Render & Commit)

 

리액트가 화면을 그리는 과정은 마치 요리사가 손님에게 음식을 내어주는 과정과 비슷합니다.

 

🐣  7살 버전: 요리사의 시식 타임

1. Render Phase (주방에서 요리하기): 손님이 주문을 바꾸면, 요리사는 주방에서 음식을 새로 만들어요. 하지만 바로 손님 식탁에 내놓지는 않죠. "이 맛이 맞나?" 하고 미리 맛을 보며 체크하는 단계예요.
2. Commit Phase (식탁에 내놓기): 요리가 완벽하다고 생각되면 그제야 손님의 식탁에 음식을 딱! 내려놓아요. 손님은 요리사가 주방에서 바쁘게 움직이는 건 보지 못하고, 완성된 맛있는 음식만 보게 된답니다.

 

💻  핵심: 리액트는 Render Phase에서 바뀐 부분을 계산하고, Commit Phase에서 실제 눈에 보이는 화면(DOM)을 업데이트합니다.

---

2. Virtual DOM(가상 DOM)이란?

실제 DOM은 건드리기 아주 까다롭고 무거운 거대한 조각상과 같아요.

리액트는 이 조각상을 직접 깎는 대신 아주 똑똑한 방법을 씁니다.

 

🐣  7살 버전: 투명한 연습장 마법

우리가 아주 큰 스케치북(실제 DOM)에 그림을 그리고 있다고 해봐요.

그림 하나를 틀리면 지우개로 빡빡 지워야 하고, 종이가 찢어질 수도 있죠?

리액트는 그 위에 투명한 비닐 연습장(가상 DOM)을 한 장 깔아요.

그리고 바꾸고 싶은 부분을 비닐 위에 먼저 그려보는 거예요.

"어? 창문만 노란색으로 바꾸면 되겠네!" 하고 비닐을 보고 알아낸 다음,

진짜 스케치북에는 그 창문 부분만 조심해서 슥슥 색칠해주는 거예요.

처음부터 다 지우고 새로 그릴 필요가 없어서 엄청 빠르답니다!

 

 

💻  왜 가상 DOM을 쓰나요?

• 진짜 DOM은 무거워요: 실제 브라우저 화면을 하나 바꿀 때마다 브라우저는 전체를 다시 계산하느라 힘들어합니다.
• 가상 DOM은 가벼워요: 자바스크립트 객체 형태라 계산이 아주 빠릅니다.
• 모아서 처리해요 (Batching): 여러 개의 변경 사항을 비닐 연습장에서 한꺼번에 계산한 뒤, 실제 화면에는 딱 한 번만 반영해서 효율적입니다.

---

💻 코드로 보는 리액트 렌더링

아래 코드는 상태가 바뀔 때 리액트가 어떻게 반응하는지를 보여줍니다.

import React, { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  // 1. 버튼을 누르면 'Render Phase'가 시작됩니다.
  const toggleLike = () => {
    setLiked(!liked); 
  };

  return (
    <div>
  // 2. 가상 DOM 연습장에서 하트 모양만 바뀐 걸 확인합니다.
      <h1>{liked ? '❤️' : '🤍'}</h1>
  // 3. 'Commit Phase'에서 실제 화면의 하트만 쏙 바뀝니다.
      <button onClick={toggleLike}>좋아요</button>
    </div>
  );
}

---

🔥 최종 요약 및 실무 팁

1. 계산은 가상 DOM에서: 비닐 연습장에서 미리 그려보고 바뀐 부분만 찾습니다.
2. 반영은 한 번에: 여러 번 지우지 않고, 한 번에 싹 바꿔서 브라우저를 편하게 해줍니다.
3. 결론: 리액트가 빠른 이유는 이 '비닐 연습장(Virtual DOM)' 덕분에 일을 효율적으로 하기 때문입니다!

이상 개발자 꿈나무 엠디노였습니다...
머지않아 또 다른 숙제와 문제 해결 과정으로 찾아뵙겠습니다..

그럼 이만!