Tree of Flutter
- Widget Tree
- Element Tree
- Render Tree
Element Tree와 Render Tree는 플러터가 내부적으로 관리하며,
우리가 생성한 Widget Tree에 근거해서 Flutter가 build 메소드를 통해 생성한다.
Element Tree가 중간에서 Widget Tree와 Render Tree에 일대일 맞대응 하고있다.
Widget Tree
우리가 코드를 통해 구현한 트리
하나의 설계도로서 스크린에 그려야하는 순서와 모양과 같은 UI에 대한 정보를 담고있다.
빌드 메소드가 호출될 때마다 새롭게 Rebuild 된다.
Element Tree
Widget Tree와 Render Tree를 연결하고 있다.
Widget이 생성될 때마다 Element도 생성된다.
Element는 대응되는 Widget의 위치, 타입, 크기, 배경색 등의 정보를 담고있다.
Element가 Pointer와 비슷한 개념으로 Widget을 가리키고 있다.
Render Tree
스크린에 직접적으로 그림을 그려주는 High Level 시스템
최종적으로 우리가 보게되는 모든 요소들은 Render Tree의 작업 결과물이다.
업데이트 과정
어떤 위젯이 변경되고, Hot reload가 실행되었다고 하자.
Hot reload가 실행되면 build 메소드가 호출되고 Widget Tree의 모든 위젯이 rebuild된다.
이때 Element Tree는 rebuild 되지 않으며, 다시 생겨난 Widget 들과 다시 일대일 매칭을 시작한다.
이제 변경된 부분에 한해서 다시 렌더링이 필요하다면 이를 Render Tree에 정보를 넘겨
받은 정보를 바탕으로 Render Tree가 위젯을 다시 그린다.
Widget 자체는 새로 생성되지만, Widget을 빌드하는 비용, 속도는 매우 적고 Element Tree가 재생성되지 않고 변경되어야 하는 부분만을 렌더링할 수 있게 함으로써 60FPS의 빠른 속도를 보장할 수 있다.