본문 바로가기
React

React- 가상돔(Virtual DOM) 이해하기

by 새발개발JA 2022. 6. 11.
반응형

 

 

 

리액트 동작원리를 찾다보니 가상돔에 대한 이야기를 참 많이 들었다.

DOM 에 대한 개념을 알고 있지만 가상돔은 생소한 개념이었다. 얘의 정체를 하나하나 공부해보자. 

 

 

다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 

 

1. DNS 이해하기

 

Network - DNS 이해하기 + 기본 동작원리

요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한

devbirdfeet.tistory.com

 

2. 브라우저 렌더링 이해하기

 

Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom)

요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한

devbirdfeet.tistory.com

 

3. 가상돔(Virtual DOM) 이해하기

 

React- 가상돔(Virtual DOM) 이해하기

리액트 동작원리를 찾다보니 가상돔에 대한 이야기를 참 많이 들었다. DOM 에 대한 개념을 알고 있지만 가상돔은 생소한 개념이었다. 얘의 정체를 하나하나 공부해보자. 다음은 웹 브라우저 접

devbirdfeet.tistory.com

 

4. useState 동작원리 이해하기

 

React - useState 동작원리 이해하기

다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 r

devbirdfeet.tistory.com

 

 


React - 가상돔(Virtual DOM) 이해하기

 

DOM 이란 

Document Object Model (문서객체모델)의 약자이다.

문서 객체 란 Web Browser 안에서 HTML 문서에 JavaScript 가 접근할 수 있도록  <html 태그> 들을 객체 (object) 로 만든 것이다. 

프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다.

 

→ 한마디로 웹브라우저 안에서 javaScript 는 개발자들이 HTML 태그들 속에 열심히 심은 기능들에 접근하여 기능을 실행해야 한다. 하지만 HTML 문서 안에 프로그래밍 언어인 자바스크립트는 어떻게 접근할 수 있을까? (종족 자체가 다른데?) 그건 DOM 이라는 객체를 통해 인식 가능하다고 본다.

(이 객체모델은 내부 API 로 연결되어 여러 언어에서 사용될 수 있다. 그래서 MDN 에서는 api 로 정의하기도 한다.)

 

HTML 문서를 텍스트가 아닌, 트리 구조를 갖는 객체들의 계층적 구조로 표현

 

 기존 렌더링 방식은

1. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를 만든다. 

2. 브라우저는 서버가 보내준 CSS 파일 을 해석(Parsing)하여 CSSOM 트리 도 만든다.

3. DOM 트리 + CSSOM 트리 를 결합해 렌더트리 를 만든다. 

4. 렌더트리로 각 노드의 위치와 크기를 계산한 레이아웃 을 만든다. 뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를 계산한다

5. Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리는 페인트(Paint) 를 한다.

 

 

 

문제점은 

DOM은 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 한다. (한글자만 수정해도 리렌더가 일어나는 것이다.)

하지만 매번 새롭게 구성하기 때문에, 렌더할 양이 많으면 속도가 느려지게 된다.

 

 

그래서 가상돔(Virtual DOM) 이 나왔다.

  • DOM의 구조를 흉내낸 JavaScript  객체이다. (트리구조)
  • in-memory에 존재해서 실제 렌더 되지 않는다.

 

 

리액트가 가상돔을 반영하는 절차

예전에 그림을 그리다 마음에 안들면 (즉, 고치고 싶으면) 그냥 찢어버리고 다시 그렸던 적이 있다.

찢어버리고 새로 그리는 게 아니라 지우개로 고칠 부분만 고치는 것과 가상돔이 비슷한 개념인 것 같다.

 

작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다

큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타낼 수 있다.

 

 

1. 뭐가 바뀌면 UI 를 가상돔에 리렌더링 한다.

 

2. 가상돔끼리 비교하고(diffing 알고리즘)

 

3. 바뀐 부분만 실제 DOM에 적용한다. (레이아웃계산은 한번만))

 

 

가상돔은 필요한 부분만 쏙 골라집는다

 

 

 

 

 

 

ref: https://velog.io/@sbinha/React%EC%97%90%EC%84%9C-Virtual-DOM

https://m.blog.naver.com/magnking/220972680805

https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

 

 

 

 

반응형

댓글