DOM, 가상DOM, Fiber의 차이는 뭘까 ?

[yunseorim1116]

0. 돔(DOM)이란 무엇일까?

웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.

0-1.실제 DOM의 성능 문제

실제 DOM을 조작하는 작업은 많은 계산과 리소스를 소모합니다. 예를 들어요소를 추가하거나 삭제할 때, 브라우저는 해당 요소와 관련된 모든 스타일과 레이아웃을 다시 계산해야 합니다. 이러한 작업은 특히 대규모 애플리케이션에서 성능 저하를 초래할 수 있습니다. DOM을 변경하면 브라우저는 화면에 표시되는 내용을 다시 계산해야 하며, 이는 "reflow"와 "repaint" 과정을 발생시킵니다. 이 과정은 매우 비효율적일 수 있고 특히 사용자 인터페이스(UI)가 자주 업데이트되는 경우 성능에 큰 영향을 미칩니다.

1. 가상돔(DOM)은 무엇일까?

가상 DOM(Virtual DOM)은 실제 DOM의 경량 복사본으로 React에서 컴포넌트의 렌더링을 관리하기 위해 사용됩니다. React는 상태가 변경될 때마다 가상 DOM을 생성하여 UI를 업데이트합니다. 가상 DOM은 메모리 내에서 JavaScript 객체로 존재하며 실제 DOM과 비교하여 변경된 부분만을 계산하고 그 결과를 바탕으로 최소한의 업데이트를 실제 DOM에 반영합니다. 이렇게 함으로써 DOM 조작의 비용을 줄이고 성능을 향상시킬 수 있습니다.

2. Fiber는 무엇일까?

Fiber는 React 16에서 도입된 내부 데이터 구조로 각 컴포넌트의 상태, 렌더링 트리, 업데이트 과정을 관리합니다. Fiber는 각 컴포넌트를 Fiber 노드로 표현하고 이들 노드를 트리 형태로 연결하여 React가 비동기적으로 렌더링할 수 있게 합니다.

3. 가상 DOM과 Fiber의 차이는 무엇일까?

가상 DOM: UI의 변경 사항을 효율적으로 처리하기 위한 경량 복사본이고 UI를 표현합니다.
Fiber: 이 변경 사항을 관리하고 비동기적이고 점진적인 렌더링을 가능하게 하는 내부 데이터 구조이고, Fiber는 그 표현을 최적화하는 데 필요한 정보를 관리하는 역할을 합니다.