React 성능 잠금 해제: Fiber 작업 루프, 스케줄러 통합 및 우선순위 큐

끊임없이 진화하는 프론트엔드 개발 환경에서 성능은 단순한 기능이 아니라 근본적인 기대치입니다. 전 세계 수백만 명의 사용자가 다양한 기기와 네트워크 환경에서 사용하는 애플리케이션의 경우, 부드럽고 반응성이 뛰어난 사용자 인터페이스(UI)를 구현하는 것이 가장 중요합니다. UI 구축을 위한 선도적인 JavaScript 라이브러리인 React는 이러한 문제를 해결하기 위해 상당한 아키텍처 변화를 거쳤습니다. 이러한 개선 사항의 핵심에는 React Fiber 아키텍처가 있으며, 이는 조정 알고리즘의 완전한 재작성입니다. 이 게시물에서는 React Fiber의 작업 루프 세부 사항, 스케줄러와의 원활한 통합, 그리고 전 세계 사용자를 위한 성능이 뛰어난 유동적인 사용자 경험을 조율하는 데 있어 우선순위 큐의 중요한 역할에 대해 자세히 알아봅니다.

React 렌더링의 진화: 스택에서 Fiber로

Fiber 이전의 React 렌더링 프로세스는 재귀적 호출 스택을 기반으로 했습니다. 컴포넌트가 업데이트되면 React는 컴포넌트 트리를 탐색하여 UI 변경 사항에 대한 설명을 구축했습니다. 이 프로세스는 많은 애플리케이션에 효과적이었지만 중요한 한계가 있었습니다. 바로 동기적이고 차단적이라는 것입니다. 대규모 업데이트가 발생하거나 복잡한 컴포넌트 트리를 렌더링해야 하는 경우 메인 스레드가 과부하되어 많은 글로벌 시장에서 흔히 볼 수 있는 성능이 낮은 기기에서는 애니메이션이 끊기거나 상호 작용에 반응하지 않거나 사용자 경험이 저하될 수 있었습니다.

국제적으로 사용되는 전자 상거래 애플리케이션에서 흔히 볼 수 있는 시나리오를 생각해 보세요. 사용자가 복잡한 제품 필터를 사용합니다. 이전 스택 기반 조정 기능을 사용하면 여러 필터를 동시에 적용하면 모든 업데이트가 완료될 때까지 UI가 멈출 수 있습니다. 이는 모든 사용자에게 좌절감을 주겠지만, 특히 인터넷 연결이 덜 안정적이거나 기기 성능이 더 중요한 지역에서는 더욱 큰 영향을 미칩니다.

React Fiber는 동시 렌더링을 지원하기 위해 이러한 한계를 해결하기 위해 도입되었습니다. 이전 스택과 달리 Fiber는 재진입 가능하고 비동기적이며 중단 가능한 조정 알고리즘입니다. 이는 React가 렌더링을 일시 중지하고 다른 작업을 수행한 다음 메인 스레드를 차단하지 않고 나중에 렌더링을 다시 시작할 수 있음을 의미합니다.

Fiber 노드 소개: 보다 민첩한 작업 단위

핵심적으로 React Fiber는 작업 단위를 컴포넌트 인스턴스에서 Fiber 노드로 재정의합니다. Fiber 노드를 수행할 작업 단위를 나타내는 JavaScript 객체로 생각하세요. React 애플리케이션의 각 컴포넌트에는 해당 Fiber 노드가 있습니다. 이러한 노드는 컴포넌트 트리를 미러링하는 트리로 연결되지만, 새로운 렌더링 모델을 용이하게 하는 추가 속성이 포함됩니다.

Fiber 노드의 주요 속성은 다음과 같습니다.

• Type: 요소의 유형(예: 함수 컴포넌트, 클래스 컴포넌트, 문자열, DOM 요소).
• Key: 목록 항목의 고유 식별자이며 효율적인 업데이트에 중요합니다.
• Child: 첫 번째 자식 Fiber 노드에 대한 포인터입니다.
• Sibling: 다음 형제 Fiber 노드에 대한 포인터입니다.
• Return: 부모 Fiber 노드에 대한 포인터입니다.
• MemoizedProps: 이전 렌더를 기억하는 데 사용된 props입니다.
• MemoizedState: 이전 렌더를 기억하는 데 사용된 state입니다.
• Alternate: 다른 트리(현재 트리 또는 작업 중 트리)의 해당 Fiber 노드에 대한 포인터입니다. 이는 React가 렌더링 상태 간에 전환하는 방식의 기초입니다.
• Flags: 이 Fiber 노드에서 수행해야 할 작업 유형(예: props 업데이트, 효과 추가, 노드 삭제)을 나타내는 비트마스크입니다.
• Effects: 수명 주기 메서드 또는 훅과 같은 이 Fiber 노드와 관련된 효과 목록입니다.

Fiber 노드는 컴포넌트 인스턴스가 그랬던 것처럼 JavaScript 가비지 수집에 의해 직접 관리되지 않습니다. 대신 React가 효율적으로 탐색할 수 있는 연결된 목록을 형성합니다. 이 구조를 통해 React는 작업을 쉽게 관리하고 중단할 수 있습니다.

React Fiber 작업 루프: 렌더링 프로세스 조율

React Fiber의 동시성을 위한 핵심은 작업 루프입니다. 이 루프는 Fiber 트리를 탐색하고, 작업을 수행하고, 완료된 변경 사항을 DOM에 커밋하는 역할을 합니다. 이 루프를 혁신적으로 만드는 이유는 일시 중지하고 다시 시작할 수 있다는 점입니다.

작업 루프는 크게 두 단계로 나눌 수 있습니다.

1. 렌더링 단계(작업 중 트리)

이 단계에서 React는 컴포넌트 트리를 탐색하고 Fiber 노드에서 작업을 수행합니다. 이 작업에는 다음이 포함될 수 있습니다.

• 컴포넌트 함수 또는 `render()` 메서드 호출.
• props 및 state 조정.
• Fiber 노드 생성 또는 업데이트.
• 부작용 식별(예: `useEffect`, `componentDidMount`).

렌더링 단계 동안 React는 작업 중 트리를 빌드합니다. 이것은 UI의 잠재적 새 상태를 나타내는 별도의 Fiber 노드 트리입니다. 중요한 것은 작업 루프가 이 단계에서 중단 가능하다는 것입니다. 우선순위가 높은 작업이 도착하면(예: 사용자 입력), React는 현재 렌더링 작업을 일시 중지하고, 새 작업을 처리한 다음, 나중에 중단된 작업을 다시 시작할 수 있습니다.

이 중단 가능성은 부드러운 경험을 달성하는 데 핵심입니다. 국제 여행 웹사이트의 검색 창에 입력하는 사용자를 상상해 보세요. React가 제안 목록을 렌더링하는 데 바쁜 동안 새 키 입력이 도착하면, 제안 렌더링을 일시 중지하고, 키 입력을 처리하여 검색 쿼리를 업데이트한 다음, 새 입력에 따라 제안 렌더링을 다시 시작할 수 있습니다. 사용자는 지연이 아니라 입력에 대한 즉각적인 응답을 인지합니다.

작업 루프는 Fiber 노드를 반복하며 `flags`를 확인하여 수행해야 할 작업을 결정합니다. Fiber 노드에서 해당 자식, 다음 형제, 그리고 다시 부모로 이동하여 필요한 작업을 수행합니다. 이 탐색은 모든 보류 중인 작업이 완료되거나 작업 루프가 중단될 때까지 계속됩니다.

2. 커밋 단계(변경 사항 적용)

렌더링 단계가 완료되고 React가 안정적인 작업 중 트리를 확보하면 커밋 단계로 들어갑니다. 이 단계에서 React는 부작용을 수행하고 실제 DOM을 업데이트합니다. 이 단계는 UI를 직접 조작하기 때문에 동기적이며 중단할 수 없습니다. React는 깜박임이나 일관되지 않은 UI 상태를 피하기 위해 DOM을 업데이트할 때 단일 원자적 작업으로 수행하기를 원합니다.

커밋 단계 동안 React는 다음과 같습니다.

• DOM 변경(요소 추가, 제거, 업데이트)을 실행합니다.
• `componentDidMount`, `componentDidUpdate`와 같은 부작용과 `useEffect`에서 반환된 정리 함수를 실행합니다.
• DOM 노드에 대한 참조를 업데이트합니다.

커밋 단계 후 작업 중 트리는 현재 트리가 되고, 후속 업데이트를 위해 프로세스를 다시 시작할 수 있습니다.

스케줄러의 역할: 작업 우선순위 지정 및 예약

Fiber 작업 루프의 중단 가능한 특성은 언제 작업을 수행하고 어떤 작업을 먼저 수행할지 결정하는 메커니즘 없이는 그다지 유용하지 않을 것입니다. 여기서 React 스케줄러가 등장합니다.

스케줄러는 React가 작업 실행을 관리하는 데 사용하는 별도의 저수준 라이브러리입니다. 주요 책임은 다음과 같습니다.

• 작업 예약: 렌더링 작업 시작 또는 재개를 결정합니다.
• 작업 우선순위 지정: 다양한 작업에 우선순위를 할당하여 중요한 업데이트가 신속하게 처리되도록 합니다.
• 브라우저와 협력: 메인 스레드를 차단하지 않고 브라우저가 페인팅 및 사용자 입력 처리와 같은 중요 작업을 수행하도록 합니다.

스케줄러는 주기적으로 제어권을 브라우저에 양보하여 다른 작업을 실행할 수 있도록 합니다. 그런 다음 브라우저가 유휴 상태이거나 더 높은 우선순위의 작업을 처리해야 할 때 작업을 다시 시작하도록 요청합니다.

이 협력적 멀티태스킹은 반응성이 뛰어난 애플리케이션을 구축하는 데 중요합니다. 특히 네트워크 지연 및 기기 기능이 크게 다를 수 있는 전 세계 사용자를 위한 경우 더욱 그렇습니다. 낮은 우선순위로 렌더링을 완전히 독점하는 React로 인해 속도가 느린 애플리케이션을 경험할 수 있는 지역의 사용자는 스케줄러가 양보함으로써 무거운 렌더링 중에도 브라우저가 사용자 상호 작용에 여전히 응답하거나 UI의 중요 부분을 렌더링하여 훨씬 더 부드러운 인지 성능을 제공할 수 있습니다.

우선순위 큐: 동시 렌더링의 기반

스케줄러가 어떤 작업을 먼저 수행할지 어떻게 결정할까요? 여기서 우선순위 큐가 필수적입니다. React는 다양한 유형의 업데이트를 긴급성에 따라 분류하고 각 업데이트에 우선순위 수준을 할당합니다.

스케줄러는 우선순위에 따라 정렬된 보류 중인 작업 큐를 유지합니다. 작업을 수행할 시간이 되면 스케줄러는 큐에서 가장 우선순위가 높은 작업을 선택합니다.

다음은 우선순위 수준의 일반적인 분류입니다(정확한 구현 세부 정보는 발전할 수 있음).

• 즉시 우선순위: 사용자 입력(예: 텍스트 필드 입력)에 대한 응답과 같이 연기해서는 안 되는 긴급 업데이트의 경우. 이러한 업데이트는 일반적으로 동기적으로 또는 매우 높은 긴급도로 처리됩니다.
• 사용자 차단 우선순위: 모달 대화 상자 또는 드롭다운 메뉴 표시와 같이 사용자 상호 작용을 방해하는 업데이트의 경우. 사용자를 차단하지 않도록 이러한 업데이트는 신속하게 렌더링해야 합니다.
• 일반 우선순위: 목록을 렌더링하고 데이터를 가져오는 것과 같이 사용자 상호 작용에 즉각적인 영향을 주지 않는 일반 업데이트의 경우.
• 낮은 우선순위: 분석 이벤트 또는 백그라운드 계산과 같이 연기할 수 있는 중요하지 않은 업데이트의 경우.
• 화면 외부 우선순위: 현재 화면에 표시되지 않는 컴포넌트(예: 화면 외부 목록, 숨겨진 탭)의 경우. 이러한 항목은 가장 낮은 우선순위로 렌더링하거나 필요한 경우 건너뛸 수도 있습니다.

스케줄러는 이러한 우선순위를 사용하여 언제 기존 작업을 중단하고 언제 다시 시작할지 결정합니다. 예를 들어, React가 큰 검색 결과 목록을 렌더링하는 동안(일반 우선순위) 입력 필드에 입력하면(즉시 우선순위) 스케줄러는 목록 렌더링을 일시 중지하고, 입력 이벤트를 처리한 다음, 새 입력에 따라 목록 렌더링을 다시 시작합니다.

실제 국제 사례:

서로 다른 대륙의 팀에서 사용하는 실시간 협업 도구를 생각해 보세요. 사용자는 상당한 렌더링이 필요한 큰 임베디드 차트를 보는 다른 사용자가 있는 동안 문서를 편집할 수 있습니다(높은 우선순위, 즉시 업데이트). 동료로부터 새 메시지가 도착하면(주의가 필요하므로 사용자 차단 우선순위), 스케줄러는 메시지 알림이 즉시 표시되도록 하고, 차트 렌더링을 일시 중지하고, 메시지가 처리된 후 차트 렌더링을 다시 시작합니다.

이 정교한 우선순위 지정은 중요한 사용자 대면 업데이트가 항상 우선순위로 처리되도록 보장하여 사용자의 위치나 기기에 관계없이 더 반응성이 뛰어나고 즐거운 경험을 제공합니다.

Fiber가 스케줄러와 통합되는 방식

Fiber와 스케줄러 간의 통합은 동시 React를 가능하게 합니다. 스케줄러는 작업 양보 및 재개를 위한 메커니즘을 제공하고, Fiber의 중단 가능한 특성은 이러한 작업을 더 작은 작업 단위로 분할할 수 있도록 합니다.

다음은 상호 작용 방식에 대한 간소화된 흐름입니다.

1. 업데이트 발생: 컴포넌트의 state가 변경되거나 props가 업데이트됩니다.
2. 스케줄러가 작업 예약: 스케줄러는 업데이트를 받고 우선순위를 할당합니다. 업데이트에 해당하는 Fiber 노드를 적절한 우선순위 큐에 넣습니다.
3. 스케줄러가 렌더링 요청: 메인 스레드가 유휴 상태이거나 용량이 있을 때 스케줄러는 가장 우선순위가 높은 작업을 수행하도록 요청합니다.
4. Fiber 작업 루프 시작: React의 작업 루프는 작업 중 트리를 탐색하기 시작합니다.
5. 작업 수행: Fiber 노드가 처리되고 변경 사항이 식별됩니다.
6. 중단: 더 높은 우선순위의 작업이 사용 가능해지거나(예: 사용자 입력) 현재 작업이 특정 시간 예산을 초과하면 스케줄러는 Fiber 작업 루프를 중단할 수 있습니다. 작업 중 트리의 현재 상태가 저장됩니다.
7. 더 높은 우선순위 작업 처리: 스케줄러는 새 고우선순위 작업을 처리하며, 여기에는 새 렌더링 패스가 포함될 수 있습니다.
8. 재개: 더 높은 우선순위 작업이 처리되면 스케줄러는 저장된 상태를 사용하여 중단된 Fiber 작업 루프를 중단한 지점에서 다시 시작할 수 있습니다.
9. 커밋 단계: 렌더링 단계에서 우선순위가 지정된 모든 작업이 완료되면 React는 커밋 단계를 수행하여 DOM을 업데이트합니다.

이러한 상호 작용을 통해 React는 다양한 업데이트의 긴급성과 메인 스레드의 가용성을 기반으로 렌더링 프로세스를 동적으로 조정할 수 있습니다.

글로벌 애플리케이션을 위한 Fiber, 스케줄러 및 우선순위 큐의 이점

Fiber와 스케줄러로 도입된 아키텍처 변경은 특히 전 세계 사용자 기반을 가진 애플리케이션에 상당한 이점을 제공합니다.

• 향상된 반응성: 메인 스레드가 차단되지 않도록 함으로써 복잡한 렌더링 작업 중에도 애플리케이션은 사용자 상호 작용에 반응성을 유지합니다. 이는 전 세계 많은 지역에서 일반적인 모바일 장치 또는 느린 인터넷 연결을 사용하는 사용자에게 중요합니다.
• 더 부드러운 사용자 경험: 중단 가능한 렌더링은 애니메이션과 전환이 더 부드럽게 이루어지고, 양식 유효성 오류와 같은 중요 업데이트를 다른 덜 중요한 작업이 완료될 때까지 기다리지 않고 즉시 표시할 수 있음을 의미합니다.
• 더 나은 리소스 활용: 스케줄러는 렌더링 시점과 방법을 더 현명하게 결정하여 기기 리소스 활용을 최적화할 수 있으며, 이는 모바일 기기의 배터리 수명과 구형 하드웨어의 성능에 중요합니다.
• 향상된 사용자 유지율: 일관되게 부드럽고 반응성이 뛰어난 애플리케이션은 사용자 신뢰와 만족도를 구축하여 전 세계적으로 더 높은 유지율을 이끌어냅니다. 느리거나 반응하지 않는 앱은 사용자가 빠르게 포기하게 만들 수 있습니다.
• 복잡한 UI의 확장성: 애플리케이션이 성장하고 더 많은 동적 기능이 통합됨에 따라 Fiber의 아키텍처는 성능을 희생하지 않고 복잡한 렌더링 요구 사항을 관리할 수 있는 견고한 기반을 제공합니다.

예를 들어, 전 세계 핀테크 애플리케이션의 경우 사용자가 지연 없이 인터페이스를 탐색할 수 있도록 하면서 실시간 시장 데이터 업데이트를 즉시 표시하도록 보장하는 것이 중요합니다. Fiber 및 관련 메커니즘을 통해 이를 달성할 수 있습니다.

기억해야 할 주요 개념

• Fiber 노드: 중단 가능한 렌더링을 지원하는 React의 새롭고 유연한 작업 단위입니다.
• 작업 루프: Fiber 트리를 탐색하고, 렌더링 작업을 수행하고, 변경 사항을 커밋하는 핵심 프로세스입니다.
• 렌더링 단계: React가 작업 중 트리를 빌드하는 중단 가능한 단계입니다.
• 커밋 단계: DOM 변경 및 부작용이 적용되는 동기적이고 중단할 수 없는 단계입니다.
• React 스케줄러: React 작업 실행을 관리하고, 우선순위를 지정하고, 브라우저와 협력하는 역할을 하는 라이브러리입니다.
• 우선순위 큐: 스케줄러가 긴급성에 따라 작업을 정렬하는 데 사용하는 데이터 구조로, 중요 업데이트가 먼저 처리되도록 보장합니다.
• 동시 렌더링: React가 렌더링 작업을 일시 중지, 다시 시작 및 우선순위 지정하여 더 반응성이 뛰어난 애플리케이션을 제공하는 기능입니다.

결론

React Fiber는 React가 렌더링을 처리하는 방식에서 중요한 도약입니다. 이전 스택 기반 조정을 중단 가능하고 재진입 가능한 Fiber 아키텍처로 대체하고 우선순위 큐를 활용하는 정교한 스케줄러와 통합함으로써 React는 진정한 동시 렌더링 기능을 잠금 해제했습니다. 이는 더 성능이 뛰어나고 반응성이 뛰어난 애플리케이션으로 이어질 뿐만 아니라 장치, 네트워크 조건 또는 기술적 능숙도에 관계없이 다양한 전 세계 사용자를 위한 더 공평한 사용자 경험을 제공합니다. 이러한 기본 메커니즘을 이해하는 것은 현대 웹을 위한 고품질의 성능이 뛰어나고 사용자 친화적인 애플리케이션을 구축하고자 하는 모든 개발자에게 중요합니다.

React로 계속 빌드하면서 이러한 개념을 염두에 두세요. 이러한 개념은 전 세계 선도적인 웹 애플리케이션에서 기대하는 부드럽고 원활한 경험의 숨은 영웅입니다. Fiber, 스케줄러 및 지능형 우선순위 지정을 활용하면 모든 대륙의 사용자를 만족시키는 애플리케이션을 만들 수 있습니다.