웹개발/REACT

돔(DOM)과 가상돔(Virtual DOM)

튼튼발자 2024. 7. 23. 21:50
728x90

DOM이란?

먼저, DOM이 뭔지부터 알아보자. DOM은 Document Object Model의 약자로, 웹 페이지의 구조를 나타내는 방식이야. 쉽게 말해, 우리가 HTML 코드를 작성하면 브라우저는 이를 DOM이라는 형태로 변환해서 내부적으로 관리해.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

이런 HTML 코드는 브라우저에서 다음과 같은 트리 구조의 DOM으로 변환돼.

여기서 DOM은 브라우저가 HTML 요소들을 객체 형태로 나타낸 거야.

이렇게 하면 자바스크립트로 이 요소들에 접근하고 조작할 수 있어.

문제점:

DOM의 구조가 복잡해질수록, 즉 트리의 깊이가 깊어질수록, 어떤 요소를 변경할 때마다 브라우저가 업데이트해야 하는 부분이 많아져. 이 때문에 성능 문제가 발생할 수 있어.

 

가상돔(Virtual DOM)이란?

리액트는 이런 문제를 해결하기 위해 **가상돔(Virtual DOM)**이라는 개념을 도입했어. 가상돔은 실제 DOM의 복사본을 메모리에 만들어두는 거야.

어떻게 동작할까?

  1. 변경 사항 처리: 리액트에서 어떤 변경이 발생하면, 이 변경 사항을 실제 DOM이 아니라 메모리에 있는 가상돔에 먼저 적용해.
  2. 비교 작업: 가상돔과 실제 DOM을 비교해서, 변경된 부분만 실제 DOM에 업데이트해. 이 과정을 **"Diffing"**이라고 불러.
  3. 업데이트: 최종적으로 변경된 부분만 실제 DOM에 반영하기 때문에, 전체 DOM을 업데이트하는 것보다 훨씬 효율적이야.
더보기

예시:

  1. HTML 코드가 변경됨
  2. 리액트는 가상돔에 이 변경 사항을 적용
  3. 가상돔과 실제 DOM을 비교
  4. 변경된 부분만 실제 DOM에 반영

 

왜 가상돔이 좋을까?

  • 성능 향상: 변경된 부분만 업데이트하니까 불필요한 작업이 줄어들어.
  • 효율성: 큰 애플리케이션에서도 빠르게 동작해.
  • 개발 편의성: 리액트가 복잡한 DOM 업데이트를 대신 처리해주니까, 우리는 애플리케이션 로직에 더 집중할 수 있어.

이렇게 가상돔 덕분에 리액트는 더 빠르고 효율적인 웹 애플리케이션을 만들 수 있게 도와줘. DOM과 가상돔의 차이점과 장점을 이해하면, 왜 리액트가 많은 개발자들에게 사랑받는지 알 수 있을 거야.

728x90