[React-TIL] Virtual Dom이란? 사용하는 이유?

Leesu·2023년 3월 21일
0

DOM이란?

Virtual Dom 에 대해서 공부하기 전에, DOM 이란 무엇인가를 먼저 알 필요가 있다.

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

자바스크립트는, 이러한 객체 모델을 사용하여 다음과 같은 작업을 수행할 수 있다.

  • 새로운 HTML 요소나 속성을 추가할 수 있다.
  • 존재하는 HTML 요소나 속성을 제거할 수 있다.
  • HTML 문서의 모든 HTML 요소나 속성을 변경할 수 있다.
  • 모든 CSS 스타일을 변경할 수 있다.
  • 새로운 HTML 이벤트를 추가하거나 반응할 수 있다.

위의 과정은 Document 라는 전역 객체를 통해 접근하여 추가 및 변경등이 가능하다.

즉, DOM 은 HTML 문서들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 뜻한다.

  • HTML 과 스크립팅 언어(자바스크립트)를 서로 이어주는 역활이라고 생각하면 쉽다.
  • 여기서 Tree 를 생성하는 과정은 파싱이라고 하며, HTML,CSS,JS 로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 렌더링이라고 한다.

그렇다면, Virtual Dom이란 무엇일까?

Virtual Dom이란?

Virtual의 뜻 그대로, 가상의 DOM 이란 뜻이다!

- Virtual DOM 이 나오게된 이유

  • 실제 DOM 에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM 을 조작하는 작업이 무겁기 때문이다.
  • 그래서 React 에서는 실제 DOM 의 변경사항을 빠르게 파악하고, 반영하기 위해서 내부적으로 가상 DOM 을 만들어서 관리한다.

그렇지만, DOM 이 꼭 느리기 때문이라고는 할 수 없다.

이것은 상황에 따라 달라진다.

  • React 는 대규모 SPA 와 다이나믹 UI 의 웹 페이지를 만들기 위해서 존재한다.
    만약 규모가 작고 정적인 이전의 웹 애플리케이션이라면 일반 DOM 이 성능이 더 좋다.

  • 즉, 상황에 따라 어느쪽이 좋은지 다를 수 있다는 것이다.

  • 그러나 DOM 은 앞서 말했듯 초기 정적인 웹페이지에 맞계 설계되었기 때문에,
    현재 동적인 웹 애플리케이션에 사용하기에는 성능상 문제가 발생한다.

  • 복잡한 SPA 에는 DOM 조작이 굉장히 빈번하게 발생하며, 그 변화를 적용하기 위해서는 브라우저가 많은 연산을 하게 된다.

  • 즉, 결국 비효율적인 프로세스가 발생하게 된다.

그래서, Virtual DOM 을 사용하는 것.

- Virtual DOM 은 어떻게 동작할까

그렇다면, Virtual DOM 은 어떻게 효율적으로 작동될까.

Virtual DOM 을 사용하면 실제 DOM 에 접근하며 조작하는 대신,
이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

  • 만약, 특정 페이지에서 데이터가 변했다고 가정해보자, 리액트는 어떻게 돔을 업데이트 시킬까?
    1. 데이트가 업데이트 되면, 전체 UI 를 Virtual DOM 에 리렌더링한다.
    2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함(가상 돔 끼리 비교)
    3. 바뀐 부분만 실제 DOM 에 적용됨
    4. 컴포넌트가 업데이트될 때, 레이아웃 계산은 한번만 이루어진다.

DOM 의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤
최소한의 내용만 반영하기 때문에 성능 향상을 이끌어내는 것이다. -> 성능향상!


참고자료_1
참고자료_2
참고자료_3

profile
기억력 안 좋은 FE 개발자의 메모장

0개의 댓글