리액트 동작원리를 찾다보니 가상돔에 대한 이야기를 참 많이 들었다.
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 로 정의하기도 한다.)
기존 렌더링 방식은
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
'React' 카테고리의 다른 글
| React(74) StoryBook으로 UI 컴포넌트 작업하기 (0) | 2022.06.20 |
|---|---|
| React - useState 동작원리 이해하기 (0) | 2022.06.15 |
| React(72) map()으로 input 추가 삭제하기 (0) | 2022.05.26 |
| React(71) 마우스 이벤트로 호버시 애니메이션 넣기 (0) | 2022.05.22 |
| React(70) react-date-range 캘린더 라이브러리 사용하기 (0) | 2022.05.18 |
댓글