Flutter rendering 구조 완전 정리
- 플러터 렌더링은 서비스 구현에 직접적이지 않아 간과되기 쉽지만, 깊은 이해를 위해 중요한 주제입니다. 💡
build 메서드는 호출될 때마다 화면 전체를 다시 그리는 것이 아니며, 효율적인 렌더링을 위해 특정 과정만 반복합니다. 🔄
- 플러터는 위젯 트리, 엘리먼트 트리, 렌더 트리라는 세 가지 핵심 트리 구조를 사용하여 화면을 그립니다. 🌳
- 위젯 트리는 위젯의 계층 구조와 순서를 정의하며, 불변(immutable) 객체로 구성되어 변경 시 폐기 후 새로 생성됩니다. 🏗️
- 엘리먼트 트리는 위젯 트리와 렌더 트리를 연결하는 1:1 매핑 구조로, 위젯 트리에 비해 긴 생명주기를 가지며 재활용되어 렌더링 효율성을 높입니다. 🔗
- 엘리먼트는
ComponentElement (실제 페인팅에 관여하지 않음)와 RenderObjectElement (실제 페인팅에 관여함)로 나뉩니다. 🎨
- 렌더 트리는
RenderObjectElement로부터 생성되며, 실제 화면에 그려지는 객체들(RenderObject)로 구성되어 크기, 위치 등 구체적인 페인팅 정보를 가집니다. 🖼️
StatefulWidget의 State 객체는 위젯 트리가 아닌 엘리먼트 트리에 연결되어, 상태 변화 시 엘리먼트 트리를 통해 효율적인 업데이트를 가능하게 합니다. 🧩
- 플러터는 위젯 트리를 자주 재구축하더라도, 엘리먼트 트리와 렌더 트리를 재활용하고 변경된 부분만 교체하여 렌더링 성능을 최적화합니다. ✨