Virtual Dom

Virtual DOM

• 실제 브라우저의 DOM 이 아닌 리액트가 관리하는 가상 DOM
• 브라우저가 해석하는 대상이 아니기 때문에 reflow와 repaint를 수행하지 않음
• 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료됐을 때, 실제 브라우저 DOM에 반영
  • 메모리에서 계산하는 과정을 거치면 렌더링 과정을 최소화 할 수 있고 브라우저와 개발자의 부담을 덜 수 있다.
• 자바스크립트 객체로 관리

render

• 함수(컴포넌트)를 호출하여 Virtual DOM(객체)으로 만드는 것
  • 뷰가 어떻게 생겼고, 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
• 내부에 있는 컴포넌트들을 재귀호출을 통해 렝더링을 진행

리-렌더링

• UI를 갱신하거나 새로고침 하는 과정
• 컴포넌트의 상태(State)나 속성(Props)이 변경되어 화면을 갱신하는 과정을 의미
  • 변경된 부분만을 감지하여 최소한의 업데이트만 수행 -> 가상돔 사용

리액트 렌더링 방식

• 리액트에서의 렌더링이란, 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props, state 의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM의 결과를 브라우저에게 제공할 것인지 계산하는 일련의 가정

React 렌더링 프로세스

• 리액트는 2단계에 거쳐 화면에 UI 를 렌더링 함

1. Render : 컴포넌트를 계산하고 업데이트 사항을 파악하는 단계
2. Commit : 변경사항을 실제 DOM에 반영하는 단계

1. Render 과정

1. 포넌트를 호출해 결과값을 계산
2. React Element 들을 모아 Virtual DOM(객체) 생성
   1. Virtual DOM : 리액트 엘리먼트라고 부르는 객체 값의 모임
      가상돔 → 메모리에만 존재하며, 실제 돔에 바로 적용되지 않음
3. 사용자에게 노출되지 않는 모든 비동기 작업을 수행

결론 : React 컴포넌트를 호출하여 Virtual DOM 이라는 객체 값으로 변환하는 과정

2. Commit 과정
1. Virtual DOM 을 실제 DOM 에 반영 (더블 버퍼링 기법)
2. 동기적으로 일어남

복잡하게 이러는 이유

• 개발자가 직접 DOM을 수동으로 하나하나 변경해야 한다면, 어떤 값이 변경되었는지 파악하기 어려울 것. 이러한 어려움을 리액트 내부에서 알아서 관리해 줌으로써, 효율적으로 유지보수하고 관리할 수 있게 된 것이다.

업데이트 발생

1. Render 과정을 처음부터 다시 실행 → 새로운 Virtual DOM 생성
2. Next Virtual DOM ↔ Prev Virtual DOM 의 차이점 비교 ⇒ diffing 알고리즘이 사용됨
3. 계산된 차이점을 실제 DOM 에 한꺼번에 업데이트

재조정
재조정

• 동시에 발생한 업데이트를 모아 한번만 DOM 을 수정
• 이전 렌더링 결과와 현재 렌더링(업데이트) 결과를 비교하여 변경된 부분을 갱신하는 작업
  • 리렌더링 후 엘리먼트 자체가 달라졌을 때
  • 리렌더링 후 동일한 엘리먼트 순서가 달라졌을 때