React

브라우저의 기본 렌더링 방식과 React.js의 렌더링 방식 살펴보기(With Virtual DOM)

JANNNNNN 2025. 4. 6. 15:04

1. 브라우저의 기본 렌더링 방식

우리가 웹사이트를 만들 때 흔히 사용하는 세 가지 언어가 있어요: HTML, CSS, JavaScript.

  • HTML은 웹페이지의 뼈대(구조)를 만들어요.
  • CSS는 그 뼈대에 색이나 크기 같은 꾸밈(스타일)을 입혀줘요.
  • JavaScript는 웹페이지를 움직이게 해주는 역할을 해요 (예: 버튼 클릭 시 반응하기)

렌더링이란?

렌더링이란, 이 HTML, CSS, JS로 작성된 코드들을 화면에 실제로 보이게 그려주는 과정을 말해요. 이때 브라우저는 다음과 같은 순서를 따릅니다:

 

  • HTML 파싱 → DOM 생성
    HTML을 읽어들이고, 웹페이지의 구조를 객체 형태로 바꿔서 DOM(Document Object Model)이라는 트리를 만듭니다.
  • CSS 파싱 → CSSOM 생성
    CSS도 마찬가지로 읽어서 CSSOM(CSS Object Model)이라는 객체 트리로 변환해요.
  • 렌더 트리(Render Tree) 생성
    DOM과 CSSOM을 합쳐서 화면에 어떤 요소가 어떤 스타일로 보여질지 결정한 렌더 트리를 만들어요.
  • 레이아웃 계산
    각각의 요소가 어디에 위치하고, 얼마나 큰지 계산해요.
  • 페인팅(Painting)
    이 정보를 바탕으로 화면에 실제로 그려요. 우리가 웹사이트를 눈으로 보게 되는 단계입니다.
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 { color: blue; }
    </style>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <button onclick="changeText()">클릭해봐요</button>
    <script>
      function changeText() {
        document.querySelector("h1").innerText = "반가워요!";
      }
    </script>
  </body>
</html>

 

위 코드는 "안녕하세요!"라는 파란색 제목이 있고, 버튼을 누르면 글자가 "반가워요!"로 바뀌는 웹페이지입니다.

버튼 클릭 시 JavaScript가 DOM을 조작하여 텍스트를 변경하고, 브라우저는 다시 페인팅해줘요.

문제점: 기존 방식의 한계

기존 브라우저 방식은 JavaScript로 DOM을 직접 조작해야 합니다.
하지만 DOM은 구조가 복잡하고 무겁기 때문에, 자주 조작하면 성능이 떨어질 수 있어요.

(Painting 하는 과정은 생각보다 성능에 큰 영향을 주기 때문)

 

❓ 질문

“그리고 Vanilla JS도 사실 필요한 부분만 바꿀 수 있는 거 같은데, 굳이 React가 Virtual DOM까지 써야 하는 이유가 뭔가요?”

1. Virtual DOM에서 변경 감지는 state가 바뀌는 순간에 일어난다

React는 기본적으로 상태(state) 중심의 구조입니다.

예를 들어 이런 코드가 있을 때:

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>+</button>

사용자가 버튼을 클릭하면 setCount가 실행되고, 이때 React는 이렇게 작동해요

  • setCount()가 호출됨
  • 새로운 Virtual DOM 트리를 다시 생성함
  • 이전 Virtual DOM과 새 Virtual DOM을 비교(Diffing) 함
  • 바뀐 부분만 실제 DOM에 적용(Patching)

 

즉, React는 상태(state)가 바뀌는 순간, 내부적으로 새로운 Virtual DOM을 만들고 그걸 비교해요.
이게 바로 "변경 감지 타이밍"!!. React는 상태 변화가 있을 때만 렌더링을 고려합니다.

2. Vanilla JS도 필요한 부분만 바꾸는 건 가능하지않나요?

맞아요. Vanilla JS에서도 아래처럼 특정 DOM만 바꾸면 되는데요.

<h1 id="title">안녕하세요!</h1>
<button onclick="changeText()">변경</button>

<script>
  function changeText() {
    document.getElementById("title").innerText = "반가워요!";
  }
</script>

위 코드도 "변경된 부분만 바꾸는 것"처럼 보이지만 문제는 !!!

➡️ 직접 우리가 바뀌는 부분을 '정확히 찾아내야 한다는 점이예요.

이는 규모가 작을 때는 상관없지만, 앱이 커질수록 문제가 되는데요.

예를 들어 쇼핑몰처럼 상태가 수백 개 있는 복잡한 앱에서는…

  • 어떤 요소가 바뀌었는지
  • 어디에 있는 DOM을 바꿔야 하는지
  • 중첩된 컴포넌트 중 어디까지 다시 그려야 하는지

이걸 개발자가 일일이 관리해야 해요. 반면 React는 그걸 자동으로 해주는 거랍니다.

3. React가 Virtual DOM을 굳이 쓰는 이유는?

기존 방식의 문제

  • 상태가 많아지고 복잡할수록 개발자가 DOM 조작을 직접 관리해야 해서 유지보수가 어려움
  • 실수할 확률이 높고, 성능도 비효율적일 수 있음

React 방식의 장점

  • 상태만 관리하면 React가 알아서 어떤 UI를 보여줘야 할지 판단함
  • 변경된 부분만 DOM에 반영 → 성능 최적화
  • 코드가 간결하고 선언적 (뭘 보여줄지만 쓰면 됨)

차이점 요약: 항목Vanilla JS (위 코드)React

바꿀 위치 개발자가 명시함 React가 Virtual DOM 비교로 찾음
바꿀 방식 직접 DOM 조작 React가 간접적으로 DOM 조작
바뀌는 범위 바뀐 요소만 직접 갱신 바뀐 요소만 자동 갱신
전체 DOM 재렌더링? NO ❌  NO ❌(Virtual DOM 비교 후 일부만 반영)

Vanilla JS 방식은 마치 우리가 직접 종이에 수정테이프로 고치는 느낌?
수정할 부분을 정확히 알아야 하고, 정확한 위치에 손으로 고쳐야함.

React는 우리가 "이 종이 내용이 이렇게 바뀌었으면 좋겠어"라고 말하면
React가 이전 종이랑 새 종이를 비교해서 자동으로 수정해주는 AI 비서가 있는 느낌!
수정테이프도 잘 쓴다고 칭찬받고, 손도 안 아프고, 빠름!

2. React의 렌더링 방식

React는 UI를 더 쉽게 만들고 관리하기 위한 JavaScript 라이브러리입니다. 특히, 많은 데이터가 바뀌는 복잡한 웹앱을 만들 때 유용해요.

해결책: Virtual DOM (가상 돔)

React는 Virtual DOM이라는 똑똑한 방법을 써서 이 문제를 해결합니다.

  • Virtual DOM은 실제 DOM의 복사본이에요. 브라우저 메모리 안에 존재하는 일종의 가상 트리입니다.
  • React는 먼저 Virtual DOM을 수정한 후, 변화가 생긴 부분만 실제 DOM에 반영해요.
  • 이를 "선비교 후갱신" 방식이라고 해요. 변경 전후를 비교(Diffing)해서 꼭 필요한 부분만 바꾸는 거죠.

렌더링 과정 요약

  1. 컴포넌트가 JSX(HTML과 비슷한 문법)로 UI 구조를 정의함
  2. React가 JSX를 JavaScript 객체로 변환 → Virtual DOM 생성
  3. 상태 변화 발생 (예: 버튼 클릭)
  4. Virtual DOM에서 변경된 부분 감지
  5. 실제 DOM에 필요한 부분만 갱신
import { useState } from 'react';

function Greeting() {
  const [text, setText] = useState("안녕하세요!");

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText("반가워요!")}>클릭해봐요</button>
    </div>
  );
}

export default Greeting;

 

  • 이 코드는 버튼을 클릭하면 텍스트가 바뀌는 React 컴포넌트예요.
  • useState는 상태(state)를 저장하는 훅이에요.
  • 상태가 바뀌면 React는 Virtual DOM을 업데이트하고, 바뀐 부분만 실제 DOM에 반영합니다.

왜 React가 좋은가?

  • 복잡한 UI 상태를 간단한 코드로 관리할 수 있어요.
  • DOM 조작을 직접 하지 않아도 되니 버그가 줄고 유지보수가 쉬워요.
  • Virtual DOM 덕분에 성능 최적화가 자동으로 어느 정도 됩니다.

마무리 요약

구분브라우저 기본 방식React 방식

 

DOM 조작 직접 간접 (Virtual DOM 사용)
렌더링 전체 DOM 다시 그림 변경된 부분만 반영
코드 구조 명령형 (어떻게 할지 직접 명시) 선언형 (무엇을 보여줄지 선언)

React는 웹 개발을 더 쉽고 효율적으로 만들어주는 도구예요.

특히, 상태가 자주 바뀌는 웹앱(예: SNS, 쇼핑몰)에 강력한 힘을 발휘합니다.

기초 개념을 이해하고 나면, 생각보다 어렵지 않게 사용할 수 있어요