모던 리액트 Deep Dive - 가상 DOM과 리액트 파이버

⚡리액트 핵심 요소 깊게 살펴보기 - 2.2 가상 DOM과 리액트 파이버

2.2.1 DOM과 브라우저 렌더링 과정

🌚 DOM(Document Object Model)

• 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있음

💡브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정
1. 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다.
2. 브라우저의 렌더링 엔진은 HTML을 파싱(해석)해 DOM 노드로 구성된 트리(DOM)를 만든다.
3. 2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다.
4. 브라우저의 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리(CSSOM)을 만든다.
5. 브라우저는 2번에서 만든 DOM 노드를 순회하는데, 모든 노드를 순회하는 것이 아닌, 사용자 눈에 보이는 노드만 순회한다.
6. 5번에 제외된, 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 CSS 정보를 노드에 적용한다.

• 레이아웃(layout) : 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정
• 페인팅(painting) : 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정

---

2.2.2 가상 DOM의 탄생 배경

• 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 듬
• 인터랙션에 따라 DOM은 계속해서 변경될 것이고, 특히 SPA(Single Page Application)에서는 더 심할 것이라 예상됨 
• DOM을 관리하는 비용이 증가할 것이며 모든 인터랙션을 추적하는 것은 개발자에게 힘든 일임.
• 이러한 문제점을 해결하기 위해 나온 것이 가상 DOM!
• 가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 반영함
• 모든 렌더링 과정을 브라우저에서 하는 게 아닌 메모리에서 계산하고 최종 결과를 브라우저 DOM에 보여준다면, 렌더링 과정을 최소화하여 비용을 줄일 수 있고, 브라우저와 개발자의 부담을 덜 수 있음!

---

2.2.3 가상 DOM을 위한 아키텍처

🌚리액트 파이버(React Fiber)

• 가상 DOM을 관리하고 렌더링 과정 최적화를 하는 역할을 함

🌚리액트 파이버의 역할

• 작업을 작은 단위로 분할하고 쪼갠 다음, 우선순위를 매긴다.
• 이러한 작업을 일시 중지하고, 나중에 다시 시작할 수 있다.
• 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다.

한가지 중요한 점은 이러한 모든 과정이 비동기로 일어난다는 것!

중요한 것은 리액트가 파이버를 처리할 때마다 작업을 직접 바로 처리하기도 하고 스케줄링하기도 함
즉, 이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 가능한 한 빠르게 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리됨!

💡리액트 파이버 트리

• 파이버 트리는 리액트 내부에 두개 존재함

1. 현재 모습을 담은 파이버 트리
2. 작업중인 상태를 나타내는 workInProgress 트리

리액트 파이버의 작업이 끝나면 리액트는 단순히 포인터만 변경하여 workInProgress트리를 현재 트리로 바꿔 버리는데, 이를 더블 버퍼링이라 함

💡파이버의 작업 순서

1. 리액트는 beginWork()함수로 파이버 작업을 수행하며 자식이 없는 파이버를 만날때까지 트리 형식으로 시작된다.
2. 1번 작업이 끝나면, completeWork()함수로 파이버 작업을 완료한다.
3. 형제가 있다면 형제로 넘어간다.
4. 2번,3번 작업이 끝난다면 return으로 돌아가 자신의 작업이 끝났음을 알린다.

📂 더 쉽게 리액트 바이퍼 트리 

🔹 개념

- 리액트는 화면을 업데이트할 때, 한 번에 모든 걸 다 바꾸지 않고 조금씩 잘라서(쪼개서) 처리하는데 이걸 가능하게 해주는 구조가 파이버 트리(Fiber Tree)

🔹 왜 필요한가?

- 옛날 리액트(리액트 15 이전)는 한 번 렌더링을 시작하면 끝날 때까지 멈출 수 없었기에, 큰 컴포넌트 트리를 가진 앱은 렌더링이 오래 걸리면 브라우저가 멈춘 것처럼 느껴졌음 그래서 리액트 16부터 Fiber 아키텍처를 도입해서, 렌더링을 작은 단위(파이버)로 나눠서 브라우저가 “잠깐! 지금은 사용자 입력부터 처리해!”라고 하면 중단했다가 다시 이어서 렌더링할 수 있게 만든 거임

🔹 Fiber 트리 구조

- 화면에 보이는 UI = DOM 트리

- 리액트 컴포넌트 구조 = Virtual DOM 트리

- 이 Virtual DOM을 실제로 업데이트 스케줄링하고 관리하는 내부 구조 = Fiber 트리

- 즉, 파이버는 각 컴포넌트를 표현하는 객체이고, 트리 형태로 연결돼 있음

🔹 파이버 노드에 담기는 정보

- 어떤 컴포넌트인지 (함수형/클래스형/호스트 DOM 등)

- 어떤 props, state를 가지고 있는지

- 부모, 자식, 형제 Fiber(트리 구조)

- 업데이트가 필요한지 여부

- 그 결과로 어떤 DOM 변경이 필요한지

🔹 중요한 포인트

1.더블 트리 구조

- 현재 화면을 보여주는 트리(현재 Fiber Tree)

- 새로 계산 중인 트리(작업 Fiber Tree) → 다 계산 끝나면 스위칭! (commit 단계)

2.시간 분할

- 렌더링을 잘게 쪼개서 중간에 멈췄다가 다시 이어갈 수 있음.

- 사용자 입력(스크롤, 클릭)이 우선순위가 더 높으면 먼저 처리.

가상DOM과 리액트의 핵심은 브라우저의 DOM을 더욱 빠르게 반영하는것이 아니라 값으로 UI를 표현한 것이며,
화면에 표시되는 UI를 자바스크립트의 문자열, 배열등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심임!