Vitual DOM, React Fiber

 

 

리액트의 버추얼 돔 (Virtual DOM)

 

개념

버추얼 돔은 리액트가 UI를 효율적으로 업데이트하기 위해 사용하는 개념입니다. 실제 돔(Document Object Model)은 브라우저에서 렌더링하는 동안 매우 비싼 연산을 요구하므로, 리액트는 메모리 내에 경량의 버추얼 돔을 유지하고 이를 통해 실제 돔을 최소한으로 조작합니다.

 

동작 방식

 

Initial Render: 리액트 컴포넌트가 처음 렌더링될 때, 리액트는 버추얼 돔을 생성합니다. 이는 실제 돔의 가상 표현으로, 메모리에 저장됩니다.
State/Props Update: 컴포넌트의 상태(state)나 속성(props)이 변경되면, 리액트는 새로운 버추얼 돔을 생성합니다.
Diffing: 리액트는 이전 버추얼 돔과 새로운 버추얼 돔을 비교(diffing)하여 변경된 부분을 찾습니다.
Reconciliation: 변경된 부분만 실제 돔에 적용하여 업데이트합니다. 이 과정에서 최소한의 돔 조작을 수행하여 성능을 최적화합니다.

 

 

장점

성능 최적화: 불필요한 돔 업데이트를 피하고, 변경된 부분만 업데이트하여 성능을 최적화합니다.
디클레어러티브 프로그래밍: 개발자가 상태나 속성을 선언적으로 정의하면, 리액트가 돔 업데이트를 자동으로 처리합니다.

 

 

 

 

 

 

리액트 파이버 (React Fiber)

 

개념

리액트 파이버는 리액트의 새로운 재조정(reconciliation) 알고리즘으로, 리액트 16부터 도입되었습니다. 이는 리액트의 코어 아키텍처를 재설계하여, 보다 복잡한 애니메이션, 제스처, 레이아웃 등을 효율적으로 처리할 수 있게 합니다.

 

목표

Interruption Handling: 긴 렌더링 작업을 더 작은 작업 단위로 나누어, 사용자 인터랙션이나 애니메이션 등의 중요한 작업을 중단 없이 수행할 수 있습니다.
Incremental Rendering: 작업을 여러 프레임에 걸쳐 분할하여, 유저 인터페이스가 끊기지 않고 자연스럽게 업데이트될 수 있습니다.
Prioritization: 작업에 우선순위를 부여하여, 더 중요한 업데이트가 먼저 처리될 수 있습니다.
동작 방식
Work Units: 파이버는 렌더링 작업을 작은 단위로 나누어 작업 큐에 추가합니다.
Priority Scheduling: 각 작업에 우선순위를 부여하여, 높은 우선순위 작업을 먼저 수행합니다.
Yielding: 작업 도중에 브라우저의 이벤트 루프에 제어권을 넘겨, 사용자 인터페이스가 끊기지 않도록 합니다.
Completion: 모든 작업이 완료되면, 실제 돔을 업데이트합니다.

 

장점

부드러운 사용자 인터페이스: 애니메이션과 사용자 인터랙션을 보다 부드럽게 처리할 수 있습니다.
효율적인 리렌더링: 큰 컴포넌트 트리를 효율적으로 리렌더링할 수 있습니다.
확장성: 복잡한 UI를 보다 효율적으로 처리할 수 있습니다.

 

 

요약

버추얼 돔은 리액트가 UI 업데이트를 효율적으로 수행하기 위해 사용하는 메모리 내 가상 돔입니다.
리액트 파이버는 리액트의 재조정 알고리즘으로, 작업을 작은 단위로 나누어 우선순위 기반으로 처리함으로써 부드러운 사용자 인터페이스를 제공합니다.
이 두 가지 개념은 리액트의 성능을 최적화하고, 개발자가 복잡한 UI를 보다 쉽게 구축하고 유지할 수 있도록 돕습니다.