Element Tree: RenderObject와의 관계 및 작동 원리

Flutter에서 Element Tree란?

Element Tree는 Widget Tree를 기반으로 생성되며 애플리케이션에 위젯을 삽입하는 것을 관리하는 Flutter의 중간 계층 구조입니다. 각 요소 인스턴스는 트리의 위젯 하나에 해당하며 해당 참조를 저장합니다. 요소와 위젯의 주요 차이점은 요소는 재구축 간에 트리에서의 위치를 유지하는 반면, 위젯은 매 build 호출 시 다시 생성될 수 있다는 점입니다.

Element Tree가 필요한 이유

Element Tree가 없으면 Flutter는 효율적으로 UI를 업데이트할 수 없습니다. 매 재빌드마다 RenderObject Tree를 다시 생성해야 한다면 성능이 허용할 수 없을 정도로 낮아집니다. Element Tree는 안정 장치 역할을 하여 업데이트 간에 RenderObject와 State에 대한 참조를 유지하고, Flutter가 렌더 트리에 최소한의 변경만 적용할 수 있도록 합니다.

요소의 유형

Flutter는 세 가지 주요 요소 유형을 사용합니다: StatelessElement(StatelessWidget용), StatefulElement(StatefulWidget용), LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement(RenderObjectWidget용). 각 유형은 위젯 클래스에 특화되어 있으며 요소가 RenderObject와 상호 작용하는 방식을 결정합니다.

3계층 아키텍처에서 Widget, Element, RenderObject의 관계

3계층 아키텍처는 Flutter에서 Widget Tree(구성), Element Tree(관리), RenderObject Tree(렌더링)로 구성됩니다. Element Tree는 연결 고리로, Widget에서 구성을 읽고 RenderObject에 명령을 전달합니다. Element Tree가 없으면 프레임워크는 선언적 설명과 실제 렌더링을 효율적으로 동기화할 수 없습니다.

요소가 위젯과 RenderObject를 연결하는 방법

요소가 트리에 마운트되면 위젯 유형을 확인합니다. 위젯이 RenderObjectWidget인 경우 요소는 해당 RenderObject를 생성하여 RenderObject Tree에 추가합니다. 위젯이 LeafRenderObjectWidget인 경우 요소는 리프 RenderObject를 생성합니다. StatelessWidget 및 StatefulWidget의 경우 요소는 단순히 하위 요소의 마운트를 관리합니다.

abstract class Element {
  Widget widget;
  Element? parent;
  List<Element>? children;

  void mount(Element? parent, dynamic newSlot);
  void update(Widget newWidget);
  void unmount();
}

이 단순화된 코드는 Element의 기본 구조를 보여줍니다. 각 요소는 현재 위젯, 부모 요소 및 하위 요소에 대한 참조를 저장합니다. mount, update, unmount 메서드는 요소와 관련 RenderObject의 라이프사이클을 관리합니다.

요소의 라이프사이클: 생성부터 제거까지

각 요소는 Flutter에서 생성, 마운트, 업데이트, 언마운트의 일련의 라이프사이클 단계를 거칩니다. 이러한 단계를 이해하는 것은 특히 애니메이션, 비동기 작업 및 상태 관리를 다룰 때 예기치 않은 동작을 디버깅하는 데 필요합니다.

단계 1: 요소 생성

요소는 위젯의 createElement 메서드를 호출하여 생성됩니다. StatelessWidget의 경우 StatelessElement가, StatefulWidget의 경우 StatefulElement(State 객체도 생성)가, RenderObjectWidget의 경우 해당 RenderObjectElement가 생성됩니다. 요소 생성은 위젯이 Widget Tree에 처음 나타날 때 발생합니다.

단계 2: 마운트

마운트 중에 요소는 Element Tree에 추가되고 부모 요소를 받습니다. RenderObjectElement의 경우 마운트는 RenderObject도 생성하여 RenderObject Tree에 삽입합니다. 위젯이 StatefulWidget인 경우 이 단계에서 State 객체의 initState 메서드가 호출됩니다.

단계 3: 업데이트

위젯이 새 구성으로 재구축되면 요소는 update 메서드를 통해 새 위젯을 받습니다. 요소는 이전 위젯과 새 위젯의 유형을 비교합니다. 유형이 일치하면 요소는 구성을 업데이트하고, 일치하지 않으면 요소는 언마운트되고 새 요소가 생성됩니다. 이를 "위젯 변경"이라고 하며 유형 변경 시 상태 손실의 원인입니다.

단계 4: 언마운트

위젯이 Widget Tree에서 제거되면 요소의 unmount 메서드가 호출됩니다. 요소는 Element Tree에서 제거되고, RenderObject는 RenderObject Tree에서 제거되며, StatefulWidget의 경우 State 객체의 dispose 메서드가 호출됩니다. 언마운트 후 위젯이 같은 위치에 다시 나타나면 요소를 재사용할 수 있습니다.

Element Tree에서 키의 역할

키(Key)는 Flutter가 이전 Widget Tree와 새 Widget Tree의 위젯을 위치가 아닌 고유 식별자로 매칭할 수 있도록 하는 요소 식별 메커니즘입니다. 키는 요소의 순서가 변경될 수 있는 동적 목록(요소 추가, 제거 또는 재정렬)을 다룰 때 매우 중요합니다.

키가 Element Tree에 미치는 영향

키가 없으면 Flutter는 트리에서의 위치에 따라 요소를 매칭합니다. 이전 트리의 위치 0에 있는 요소는 새 트리의 위치 0에 있는 위젯으로 대체됩니다. 순서가 변경된 경우 요소가 섞이고 상태가 손실되거나 잘못된 데이터에 바인딩될 수 있습니다. 키는 Flutter가 위치 대신 식별자로 요소를 검색하도록 강제합니다.

ValueKey, ObjectKey 및 UniqueKey

ValueKey는 단순한 값(문자열, 숫자)을 사용하여 요소를 식별합니다. ObjectKey는 객체 참조를 사용하며, 요소에 안정적인 문자열 식별자가 없을 때 적합합니다. UniqueKey는 생성마다 고유 식별자를 생성하며, 각 위젯 인스턴스가 고유해야 할 때 사용됩니다.

Column(
  children: items.map((item) => TodoItem(
    key: ValueKey(item.id),
    title: item.title,
    isDone: item.isDone,
  )).toList(),
)

이 예제에서 item.id가 있는 ValueKey는 목록에서 요소의 순서가 변경될 때 각 TodoItem이 상태(예: 입력 필드 포커스)를 유지하도록 보장합니다. 키가 없으면 첫 번째 위치의 요소는 같은 위치에 있던 이전 요소의 상태를 받게 됩니다.

Element Tree가 상태를 관리하는 방법

Flutter에서 상태(State)는 위젯이 아닌 요소에 저장됩니다. StatefulWidget이 재구축되어 새 위젯 인스턴스를 생성할 때, 해당 StatefulElement는 이전 State 객체에 대한 참조를 유지합니다. 새 위젯은 기존 State에 연결되어 재구축 간에 데이터를 보존할 수 있습니다.

재구축 시 상태가 손실되지 않는 이유

위젯 재구축 중에 Flutter는 새 StatefulWidget 인스턴스를 생성하지만, 해당 StatefulElement는 Element Tree에 남아 있습니다. 요소는 State에서 update 메서드를 호출하여 새 위젯을 전달합니다. 따라서 State 객체와 그 데이터는 보존됩니다. 상태 손실은 위젯 유형이 변경되거나, 키가 변경되거나, 요소가 트리에서 제거될 때만 발생합니다.

InheritedWidget과 Element Tree

InheritedElement는 하위 요소가 생성자를 통한 명시적 전달 없이 부모 InheritedWidget으로부터 데이터를 받을 수 있도록 하는 특수 요소입니다. InheritedWidget이 변경되면 InheritedElement는 모든 종속 요소에 알리고, 이들은 재구축됩니다. 이 메커니즘은 Theme, MediaQuery 및 Provider의 기초입니다.

• 종속성 — 요소는 dependOnInheritedWidgetOfExactType을 호출할 때 InheritedElement에 종속된 것으로 등록됩니다.
• 알림 — InheritedWidget이 변경되면 프레임워크는 모든 종속 요소를 재구축 필요로 표시합니다.
• 재구축 — 종속 요소는 다음 프레임에서 재구축되어 새 데이터에 따라 UI를 업데이트합니다.

Element Tree가 성능에 미치는 영향

Element Tree는 메모리를 소비하고 초기 렌더링 속도에 영향을 미칩니다. 각 요소는 일정량의 메모리(위젯 참조, 부모 참조, 하위 요소 목록, 슬롯, RenderObjectElement용 추가 필드)를 차지합니다. Element Tree를 최적화하면 시작 시간이 단축되고 메모리 소비가 줄어듭니다.

요소 재사용

Flutter는 재구축 중에 요소를 재사용하려고 시도합니다. 새 구성의 위젯이 동일한 유형과 키를 가진 경우 요소는 다시 생성되지 않고 업데이트됩니다. 이는 새 요소를 생성하고 마운트하는 것보다 훨씬 빠릅니다. 그러나 유형이나 키가 변경되면 이전 요소는 언마운트되고 새 요소가 처음부터 생성됩니다.

RepaintBoundary와 Element Tree

RepaintBoundary는 RenderObject Tree에 별도의 RenderRepaintBoundary를 생성하여 트리의 일부를 격리합니다. Element Tree 수준에서 RepaintBoundary는 특수 요소를 생성하지 않고 SingleChildRenderObjectElement를 사용합니다. 차이점은 RenderObject 수준에서 나타납니다. RepaintBoundary 내용이 변경되면 격리된 영역만 다시 그려집니다.

표에서 볼 수 있듯이 RepaintBoundary는 변경 영역을 격리하여 다시 그리기 시간을 크게 줄입니다. Element Tree 수준에서 추가 구성이 필요하지 않으며 변경 가능한 위젯을 RepaintBoundary로 감싸기만 하면 됩니다.