Flutter Key 및 상태 관리의 기본 개념 - Flutter의 세 가지 트리 구조

Flutter의 세 가지 트리 구조

개요

Flutter는 UI를 효율적으로 렌더링하기 위해 세 가지 트리 구조를 사용합니다. 이 구조들은 성능 최적화와 재사용성을 위해 설계되었으며, 개발자는 주로 Widget Tree만 직접 다룹니다.

세 가지 트리의 역할

1. Widget Tree: 개발자가 작성한 UI 구조 (불변객체)
2. Element Tree: Widget과 RenderObject를 연결하는 중간 계층 (상태 유지)
3. RenderObject Tree: 실제 화면에 그려지는 객체들 (렌더링 담당)

 

Widget Tree - 개발자가 작성한 UI 구조

Container(
  child: Row(
    children: [
      Column(
        children: [
          Icon(Icons.home),
          Container(child: Text('홈')),
        ],
      ),
      Column(
        children: [
          Icon(Icons.search),
          Container(child: Text('검색')),
        ],
      ),
    ],
  ),
)

 

Widget Tree는 UI 요소들의 계층적 구조를 나타냅니다. Container 안에 Row가 있고, Row에는 여러 Column이 있으며, 각 Column에는 Icon과 Text가 포함된 Container가 있는 형태입니다.

 

Element Tree : Element Tree는 Widget Tree의 실제 구현체입니다

• Widget: UI 설계도 (불변 청사진)
• Element: 런타임에서 생성된 살아있는 구조물 (가변 인스턴스)
• 역할: 위치, 타입, 상태를 저장하고 RenderObject와 연결

 

중요한 특징:

• State 객체는 Element에 의해 관리됩니다
• StatefulWidget은 StatefulElement를, StatelessWidget은 StatelessElement를 가집니다
• Flutter는 성능을 위해 Element와 RenderObject를 재활용합니다

비용 분석

구성 요소	생성 비용	재생성 빈도
Widget	저렴	자주 발생
Element	높음	최소화됨
RenderObject	높음	최소화됨

 

핵심 원리: Widget은 자주 재생성되지만 비용이 저렴하고, Element와 RenderObject는 생성 비용이 높으므로 최대한 재활용합니다.