[React] 리액트 - DOM(Document Object Model) 개념

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

ruriruriya

[React] 리액트 - DOM(Document Object Model) 개념 본문

🖌️Web/React

[React] 리액트 - DOM(Document Object Model) 개념

루리야ㅑ 2025. 3. 10. 19:04

React를 사용하다 보면 DOM(Document Object Model)이라는 개념이 자주 등장한다.
React는 일반 DOM과 다르게 가상 DOM(Virtual DOM)을 사용한다.
그렇다면 일반 DOM과 가상 DOM의 차이점, 그리고 React에서 DOM이 어떻게 동작하는지 정리해보자.

1️⃣ DOM이란?

✅ DOM (문서 객체 모델, Document Object Model)

HTML 문서를 브라우저가 이해할 수 있도록 객체 트리 구조로 변환한 것이다.
즉, 웹페이지의 구조를 나타내는 프로그래밍 인터페이스라고 할 수 있다.

📌 DOM의 예시

HTML이 다음과 같다고 가정하자.

<div id="app">
  <h1>안녕, React!</h1>
  <button>클릭</button>
</div>

➡️ 브라우저는 이 HTML을 DOM 트리 구조로 변환한다.

Document
 ├── <html>
      ├── <body>
           ├── <div id="app">
                ├── <h1>안녕, React!</h1>
                ├── <button>클릭</button>

JavaScript를 사용하면 DOM을 직접 조작할 수 있다.

document.getElementById("app").innerHTML = "<h1>안녕, Vue!</h1>";

✅ DOM을 직접 변경하면 어떤 문제가 발생할까?

직접 변경하면 웹페이지가 깜빡이거나, 성능이 저하될 가능성이 있다.
특히, DOM 조작이 많아질수록 웹 성능이 느려질 수 있다.

💡 DOM 업데이트는 무겁다!

HTML 요소가 많아질수록 DOM을 직접 조작하는 비용이 커진다.
이를 해결하기 위해 React는 “가상 DOM(Virtual DOM)”을 도입했다.

2️⃣ Virtual DOM (가상 DOM)이란?

✅ 가상 DOM이란?

React에서 사용하는 개념으로, 실제 DOM을 직접 수정하지 않고 메모리 안에서 변경 사항을 먼저 처리하는 방식이다.
쉽게 말하면, “DOM의 가벼운 복사본을 메모리에 저장해두고, 변경 사항을 비교해서 필요한 부분만 업데이트하는 방식”이다.

📌 가상 DOM이 동작하는 과정

React가 가상 DOM을 생성 (메모리에 저장된 DOM 트리)
상태(state)가 변경되면 새로운 가상 DOM을 생성
기존 가상 DOM과 새로운 가상 DOM을 비교 (Diff 알고리즘)
차이가 있는 부분만 실제 DOM에 적용 (업데이트)
화면이 변경됨 (리렌더링)

✅ 일반 DOM vs 가상 DOM 비교

특징	일반 DOM	가상 DOM(React)
업데이트 방식	직접 수정	변경된 부분만 수정
성능	변경 많으면 느림	효율적 (최소한의 변경만 적용)
사용 방식	document.getElementById() 사용	setState()로 관리
렌더링 최적화	없음	있음 (Diff 알고리즘)

3️⃣ React에서 DOM을 어떻게 다룰까?

✅ React에서는 useState를 통해 상태(state)를 변경하면 UI가 자동으로 업데이트된다.

import { useState } from "react";

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

  function increase() {
    setCount(count + 1); // 상태 변경
  }

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increase}>+1 증가</button>
    </div>
  );
}

📌 React에서 DOM 업데이트가 어떻게 동작하는지 살펴보자.

setCount(count + 1); 실행 → 상태 변경 (count가 1 증가)
React는 새로운 가상 DOM을 생성하여 변경 사항을 확인
기존 가상 DOM과 새로운 가상 DOM을 비교해서 <p> 태그 내용(카운트: X)만 변경
변경된 부분만 실제 DOM에 업데이트! (화면이 부드럽게 변함)

React에서는 setState()나 useState()를 사용하여 상태를 변경하면 React가 자동으로 가상 DOM을 업데이트하고, 변경된 부분만 실제 DOM에 반영한다.

4️⃣ React에서 직접 DOM을 조작하면 안 되는 이유

일반적으로 React에서는 document.getElementById() 같은 직접적인 DOM 조작을 피해야 한다.

❌ 잘못된 예시 (직접 DOM 조작)

function App() {
  function changeText() {
    document.getElementById("title").innerText = "React는 좋아!";
  }

  return (
    <div>
      <h1 id="title">안녕, React!</h1>
      <button onClick={changeText}>텍스트 변경</button>
    </div>
  );
}

💡 이 코드의 문제점

document.getElementById("title").innerText = "React는 좋아!"; → React의 상태 관리 방식과 충돌할 수 있음.
React는 상태(useState)를 통해 UI를 업데이트해야 하는데, 직접 DOM을 수정하면 React가 변경 사항을 모를 수 있음.

✅ 올바른 방식 (React의 상태 사용)

import { useState } from "react";

function App() {
  const [text, setText] = useState("안녕, React!");

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText("React는 좋아!")}>텍스트 변경</button>
    </div>
  );
}

React의 상태(state)를 변경하면 React가 가상 DOM을 통해 UI를 효율적으로 업데이트해준다.

개념설명

DOM	브라우저가 HTML을 트리 구조로 변환한 것
Virtual DOM (가상 DOM)	실제 DOM을 직접 수정하지 않고, 메모리에서 변경을 먼저 감지한 후 최소한의 변경만 반영하는 React의 최적화 기법
React가 DOM을 업데이트하는 방식	상태(state)가 변경되면 → 새로운 가상 DOM 생성 → 이전 가상 DOM과 비교 → 변경된 부분만 실제 DOM에 업데이트
React에서 직접 DOM 조작을 피해야 하는 이유	useState 같은 React의 상태 관리 방식과 충돌할 수 있어서

한마디로 요약하면 “React는 Virtual DOM을 사용해서 변경된 부분만 효율적으로 업데이트하는 방식으로 동작한다!

저작자표시 비영리 변경금지

'🖌️Web > React' 카테고리의 다른 글

[React] 리액트 - Vite로 React 프로젝트 생성 및 빌드 세팅하는 방법 (0)	2025.03.13
[React] 리액트 - 객체(Object)란? (0)	2025.03.10
[React] 리액트 - React Router를 사용하여 헤더 푸터 고정하기(BrowserRouter, Routes, Route) (1)	2024.05.20
[React] 리액트 - React에서 네비게이션 바 만들기(react-router 라이브러리) (0)	2024.05.07
[React] 리액트 - props 사용 방법 (0)	2024.04.29

'🖌️Web/React' Related Articles

ruriruriya

[React] 리액트 - DOM(Document Object Model) 개념 본문

[React] 리액트 - DOM(Document Object Model) 개념

1️⃣ DOM이란?

✅ DOM (문서 객체 모델, Document Object Model)

📌 DOM의 예시

✅ DOM을 직접 변경하면 어떤 문제가 발생할까?

2️⃣ Virtual DOM (가상 DOM)이란?

✅ 가상 DOM이란?

📌 가상 DOM이 동작하는 과정

✅ 일반 DOM vs 가상 DOM 비교

3️⃣ React에서 DOM을 어떻게 다룰까?

✅ React에서는 useState를 통해 상태(state)를 변경하면 UI가 자동으로 업데이트된다.

📌 React에서 DOM 업데이트가 어떻게 동작하는지 살펴보자.

4️⃣ React에서 직접 DOM을 조작하면 안 되는 이유

✅ 올바른 방식 (React의 상태 사용)

'🖌️Web > React' 카테고리의 다른 글

티스토리툴바