How Flutter Works: The Three Trees #DecodingFlutter
- Flutter는 위젯, 엘리먼트, 렌더 오브젝트라는 세 가지 핵심 트리 구조로 UI를 효율적으로 구축하고 렌더링합니다. 🌳
- 위젯은 불변하고 일회성인 선언형 UI 구성 요소로,
StatelessWidget과 StatefulWidget이 가장 흔하며 UI 변경 시 재구축됩니다. 🧩
StatefulWidget은 위젯 자체는 일회성이지만, 장기적인 상태와 리소스를 관리하는 State 객체에 의해 지원됩니다. 🔄
- 엘리먼트 트리는 위젯 트리 뒤에서 위젯과 렌더링 계층을 연결하며, 위젯 변경을 분석하고 UI 업데이트를 조정하는 오래 지속되는 객체입니다. 🔗
BuildContext는 해당 위젯의 엘리먼트 객체로, 위젯의 build 메서드 내에서 트리 정보를 조회하는 데 사용됩니다. 💡
- 엘리먼트는 위젯이 재구축되어도 가능한 한 오래 유지되며,
StatefulWidget의 State 객체를 관리하여 상태를 보존하는 핵심 역할을 합니다. 🕵️
- 렌더 오브젝트 트리는
RenderObjectWidget에 의해 생성되며, 위젯 값을 GPU 페인팅 호출로 변환하고 레이아웃, 페인팅, 히트 테스트 등 최종 렌더링 작업을 수행합니다. 🎨
- Flutter의 렌더링 과정은 다단계 추상화된 루프를 통해 데이터를 픽셀 버퍼로 변환하며,
RenderObject는 Skia/Impeller를 통해 드로잉 명령을 실행합니다. 🚀
- 핵심 트리 외에도 접근성, 포커스, UI 합성 등을 위한 시맨틱, 포커스, 레이어 트리 등 다양한 보조 트리들이 존재합니다. 🌲
데브허브 | DEVHUB | How Flutter Works: The Three Trees #DecodingFlutter