2일 차: React가 UI를 업데이트하는 방식
어제는 React가 무엇을 하는지 배웠습니다. 오늘은 그것을 어떻게 하는지 배웠습니다.
React가 UI에서 무엇을 변경해야 하는지 어떻게 정확히 아는지 궁금하곤 했습니다. 문단의 단어 하나만 바꿔도 React가 페이지 전체를 다시 빌드할까요? 아닙니다. React는 빠른 속도를 유지하기 위해 스마트한 프로세스를 사용합니다.
React 업데이트 사이클의 세부 내용은 다음과 같습니다.
Reconciliation과 Diffing
Reconciliation은 전략입니다. Diffing은 실제 방법입니다. React는 새로운 Virtual DOM 트리를 이전 트리와 비교합니다.
두 트리를 비교하는 것은 컴퓨터에게 어려운 작업입니다. 표준 알고리즘은 너무 느립니다. React는 두 가지 가정을 통해 빠른 속도를 유지합니다:
- 요소의 타입이 변경되면, React는 이전 트리를 파괴하고 새로운 트리를 구축합니다.
- 타입이 동일하게 유지되면, React는 변경된 속성(attributes)만 업데이트합니다.
이를 통해 React는 O(n) 시간 복잡도로 실행될 수 있습니다. 덕분에 업데이트가 즉각적으로 느껴집니다.
두 가지 단계 (The Two Phases)
React는 작업을 두 개의 뚜렷한 단계로 나눕니다:
Render Phase 이는 계획 단계입니다. React는 컴포넌트를 호출하고 변경 사항을 계산합니다. 이 단계에서는 Real DOM을 건드리지 않습니다. 건축가가 설계도를 그리는 과정이라고 생각하면 됩니다.
Commit Phase 이는 시공 단계입니다. React는 계산된 변경 사항을 Real DOM에 적용합니다. 이 부분은 동기적(synchronous)으로 작동합니다. 일단 시작되면 작업이 완료될 때까지 멈추지 않습니다.
중요: React는 DOM을 업데이트하지만, 브라우저가 픽셀을 그립니다(paints). React는 구조를 담당하고, 브라우저는 시각적 렌더링을 담당합니다.
React Fiber
React 16 이전에는 렌더링이 동기적이었습니다. 렌더링에 시간이 오래 걸리면 브라우저가 멈춰버렸습니다. 스크롤을 하거나 타이핑을 할 수 없었죠.
Fiber가 이를 바꾸어 놓았습니다. Fiber는 Render Phase를 관리하는 엔진입니다. 이를 통해 React는 다음과 같은 작업을 할 수 있습니다:
- 작업을 일시 중지하고 나중에 다시 시작할 수 있습니다.
- 백그라운드 데이터보다 사용자의 타이핑과 같은 긴급한 업데이트를 우선시할 수 있습니다.
- 작업을 작은 단위(chunks)로 나눌 수 있습니다.
Virtual DOM은 데이터 구조입니다. Fiber는 그 데이터를 조작하는 알고리즘입니다.
흐름 요약:
• 상태(State)가 변경됩니다. • Render Phase: React가 Diffing을 통해 변경 사항을 계획합니다. • Commit Phase: React가 Real DOM을 업데이트합니다. • Browser: Layout, Paint, and Composite가 일어납니다. • 화면에 픽셀이 나타납니다.