React. 가상 DOM과 리액트 파이버

가상 DOM과 리액트 파이버

• DOM : 웹페이지에 대한 인터페이스. 웹페이지의 콘텐츠와 구조를 보여주는 방법을 담는다. 실제 브라우저 구조인 DOM에 작업을 반영하는 것은 처리량이 많아 화면에 불완전하게 표시될 수 있으므로 동기적으로 일어나야 한다.

  JQuery : DOM 처리를 쉽게 해주는 JS 라이브러리
  Fiber : 리액트에서 도입된 가상 DOM의 새로운 아키텍쳐 (화면을 빠르게 그리는데 초점)
  Hook : 클래스형 컴포넌트에서 함수형 컴포넌트로 변경되면서 생긴 기능으로 함수형 컴포넌트에서 상태관리와 생명주기 기능을 사용하게 해준다.

• 가상 DOM : 실제 브라우저의 DOM이 아닌 리액트가 관리하는 가상의 DOM을 의미한다. 가상 DOM은 메모리에 존재하는 가벼운 트리 구조로, 실제 DOM의 추상화이다. 리액트는 상태의 변화에 따라 가상 DOM을 조작하고, 이를 통해 렌더링 업데이트가 필요한 부분을 파악한다. 실제 브라우저에서 웹페이지 렌더링뿐만 아니라 사용자의 인터랙션을 반영하려면 속도가 매우 느려질 수 있으므로 가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 반영한다.(즉, 메모리상에서 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용한다.)
  - 장점 : DOM 계산을 브라우저가 아닌 메모리에서 계산하는 과정을 한번 거치게 되면 실제로는 여러번 발생했을 렌더링 과정을 최소화할 수 있고 브라우저와 개발자의 부담을 덜 수 있다.

• 파이버 : 가상 DOM과 렌더링 과정을 최적화하는 아키텍쳐. 파이버 재조정자가 관리하는 자바스크립트 객체이다. 가상 DOM과 실제 DOM을 비교해 변경사항을 수집하고 둘 사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버 기준으로 화면에 렌더링을 요청한다. 화면을 빠르게 그리는데 초점을 맞춘다. 리액트 컴포넌트에 대한 정보를 1:1로 가지고 있으며 리액트 아키텍처 내부에서 비동기로 이루어진다.

• 재조정: 리액트에서 어떤 부분을 새롭게 렌더링해야하는지 가상 DOM과 실제 DOM을 비교하는 작업(알고리즘)
• 가상 DOM에 변경사항 반영: 리액트에서 상태가 변경되면, 해당 변경은 먼저 메모리에 있는 가상 DOM에 반영된다. 이 과정은 비교적 빠르게 이루어진다. 변경된 내용들이 가상 DOM에 반영되었으면, 리액트는 이 변경사항들을 효율적으로 조정하고, 브라우저의 메인 스레드가 차단되지 않도록 우선순위를 부여하여 실제 DOM에 16ms 안에 반영하려고 노력한다.
• 렌더링: 실제 DOM에 변경사항이 반영되어 화면이 업데이트되는 시점이다.

16ms: 브라우저가 1초를 60프레임(60fps)으로 나눈 시간. 웹 애플리케이션에서 부드러운 애니메이션과 사용자 경험을 제공하기 위해서는 1초당 60프레임을 유지하는 것이 이상적이다.

(브라우저 렌더링) 브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정

1. 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다.
2. 브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 트리(DOM)을 만든다.
3. 2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다.
4. 브라우저의 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리(CSSOM)을 만든다.
5. 브라우저는 DOM 노드를 순회한다.(모든 노드를 방문하지 않고 사용자 눈에 보이는 노드만 방문한다. 즉, display : none과 같이 사용자 화면에 보이지 않는 요소는 방문해 작업하지 않는다. 이는 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서이다.)
6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다.
   이 DOM 노드에 CSS를 적용하는 과정은 크게 두가지로 나눌 수 있다.
   - 레이아웃 : 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야하는지 계산하는 과정, 이 레이아웃을 거치면 반드시 페인팅 과정도 거치게 된다.
   - 페인팅 : 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정

// 기존 렌더링 방식(sync)
// ReactDOM.render(  
//  React.createElement('h1', null, 'A'),
//  document.getElementById('root')
// );
const root = ReactDOM.createRoot( 
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

• document.getElementById('root'): 실제 Dom
• ReactDOM.createRoot: 가상 Dom 생성
• render : 가상 Dom을 실제 Dom으로 렌더링