React 렌더링 메커니즘 (feat. VDOM)
요약
리액트의 렌더링 과정은 크게 두 단계, Render Phase와 Commit >Phase로 나뉩니다.
렌더 단계 (Render Phase)
Fiber 트리 구성: 컴포넌트에 대한 Element 객체(Fiber)를 생성하고, 이를 연결해 Fiber 트리를 구성합니다. Fiber 구조는 작업을 나누고 중단할 수 있어, 브라우저가 바쁜 경우 중간에 다른 작업을 처리할 수 있게 합니다.리컨실러 작동: 리액트의 리컨실러(Reconciler)는 Fiber 트리를 사용해 변경된 Virtual DOM과 기존 트리를 비교(diffing)하고, 업데이트가 필요한 부분을 계산합니다. 이 단계에서는 실제 DOM이 변경되지 않습니다.
커밋 단계 (Commit Phase)
렌더 단계에서 계산된 변경 사항을 실제 DOM에 적용합니다.
DOM 업데이트, 이벤트 바인딩, 애니메이션 적용 등의 작업이 이루어집니다.
리액트는 효율적인 UI 업데이트를 위해 가상 DOM(Virtual DOM)과 Fiber 아키텍처를 통해 렌더링 작업을 수행하게 됩니다.
Fiber 아키텍처는 React 16부터 도입된 새로운 재조정(Reconciliation) 메커니즘 입니다.
왜 가상 DOM인가?
왜 리액트는 가상 DOM이라는 개념을 사용했을까요?
실제 DOM을 조작하여 렌더링 한다고 가정해봅시다.
브라우저는 작업 내용(DOM의 변화)에 따라 따라 render tree생성 ,reflow, repaint 작업이 발생합니다. 해당 작업은 비교적 비용이 많이 드는 작업임으로 서비스에 부정적인 영향을 미칠 수 있습니다.
따라서 가상 DOM을 사용함으로써, 리액트는 실제 DOM 조작을 최소화하고, 필요한 변경만을 효율적으로 적용하여 비교적 빠른 렌더링을 할수 있게 되었습니다.
React의 재조정(Reconciliation)
그럼 리액트는 VDOM을 가지고 어떻게 효율적으로 렌더링 할까요?
바로 Fiber 알고리즘인 재조정을 통해 렌더링합니다.
렌더링 과정은 크게 두 가지 단계로 나뉩니다.
1. Render Phase
이 단계에서는 가상 DOM을 생성합니다. 정확하게는 Fiber 트리를 생성하고, 트리 내의 모든 노드를 순회하며 필요한 변경사항을 확인합니다. 이과정은 메인 스레드를 잠시 중단할 수 있으며, 중간에 사용자 작업이 들어오면 멈췄다가 다시 이어서 작업할 수 있습니다.
2. Commit Phase
Render Phase에서 생성된 가상 DOM의 모든 변경 사항을 실제 DOM에 반영하는 단계입니다. 이 단계에서 리액트는 가상 DOM과 실제 DOM 간의 동기화를 수행하며, 모든 DOM 수정이 일관되게 처리되도록 합니다. 최종적으로 브라우저가 화면에 변경 내용을 렌더링하여 이 단계를 모두 재조정(Reconciliation) 이라고 합니다.
React 렌더링 과정
리액트의 렌더링 과정을 살펴보고 추가로 리액트의 Hooks Lifecycle에 대해서도 알아보겠습니다.
리액트는 트랜스컴파일러(babel 또는 SWC)가 jsx, tsx 확장자명 파일을 is파일로 변환하면서 아래와 같이 코드를 변환 합니다.
const element = React.createElement("h1", null, "Hello, world!");이렇게 변환된 코드가 호출되고 작성한 컴포넌트는 가상 DOM에 사용될 객체를 반합니다.
// App.tsx
export default function App() {
return (
<div id='main'>
<p>Hello!</p>
</div>
);
}
// React
const element = {
type: 'div',
key: null,
ref: null,
props: {
id: 'main',
children: {
type: 'p',
key: null,
ref: null,
props: {
chiildren: 'Hello!'
},
{ ... }
},
},
{ ... }
}이렇게 반환된 객체로 VDOM(Fiber Tree) 생성합니다.
VDOM(Fiber Tree)는 결국 자바스크립트 객체이고 실제 DOM의 복제판 입니다. 그래서 VDOM은 값으로 표현된 UI(Value UI)로 이해할 수 있습니다.
이 과정이 앞서 설명한 Render Phase 과정입니다.
생성된 VDOM을 가지고 React는 실제 DOM에 업데이트 재조정(Reconciliation)을 하게 되는데, 여기서 기존 VDOM과 새로운 VDOM을 비교하는 diffing 알고리즘을 사용하여 변경점을 확인합니다. 확인된 내용을 모아 한 번에 실제 DOM에 적용하게 됩니다.
여기까지가 리엑트의 렌더링 과정입니다. DOM에 적용한 이유부터는 브라우저의 역할이고 브라우저는 렌더링 과정에 맞춰 (HTML/CSS 파싱 -> 렌더 트리 생성 -> 레이아웃 -> 페인팅) 화면을 표현하게 됩니다.
Reack Lifecycle
리액트의 재조정(렌더링 단계와 커밋 단계) 과정에서 훅의 호출 시점을 알 수 있는 이미지를 첨부했습니다. 이러한 과정을 함께 이해하면 훅에 대한 이해도가 더욱 높아질 것이라고 생각합니다.
이 처럼 리액트는 VDOM의 개념을 활용하여 자유롭게 DOM 데이터(복제)를 생성, 수정, 삭제할 수 있습니다.
그로 인해 실제 DOM의 업데이트를 최소화할 수 있습니다.
마치며
VDOM의 개념은 DOM 수정을 최소화하기 위해 고안되었다고 할 수 있습니다.
따라서 'VDOM은 빠르다'는 개념을 이해할 수 있습니다.
하지만 대부분의 상황에서 충분히 빠른 속도를 보장할 뿐, 항상 최고의 속도를 보장하지는 않습니다. 또한 React는 렌더링을 추상화하여 관리하기 때문에, 개발자는 UI 컴포넌트를 선언적 방식으로 작성할 수 있습니다.
https://goidle.github.io/react/in-depth-react-intro
https://www.youtube.com/watch?v=N7qlk_GQRJU
https://github.com/acdlite/react-fiber-architecture
https://www.youtube.com/watch?v=2EbCEluOO9Y&list=PLpq56DBY9U2B6gAZIbiIami_cLBhpHYCA&index=3
