[Flutter] Widget Tree, Element Tree, Render Tree

Three Tree

• Widget Tree
• Element Tree
• RenderObject Tree

Widget Tree

• 개발자가 코드로 작성한 위젯들을 트리 형식으로 표현한 것입니다.
• Widget Tree는 Flutter의 기본 단위로 불변 객체로 트리가 변경되면 파기됐다가 다시 재생성 됩니다.
• Widget Tree는 Element Tree와 1 대 1로 연결되어 있습니다.

Element Tree

• Widget Tree의 상태를 대신 관리하고, Render Tree의 생명주기를 관리합니다.
• Element Tree는 Widget Tree와 1 대 1로 연결되어 있습니다.
  
  

Stateless Tree 기준

• red 와 blue가 Widget Tree에 있습니다.

Stateful Tree 기준

• Widget Tree는 상태를 직접 포함하지 않습니다.
• red 상태와 blue 상태가 Element Tree에 추가되었습니다.
• red와 blue 상태는 각각의 Stateful Tile Element에서 관리됩니다.

Render Tree / RenderObject Tree

• 화면에 요소들을 배치하고 그리는 작업을 수행합니다.
• 레이아웃과 페인팅을 담당합니다.
• Element Tree에서 Render Tree의 생명주기을 관리하기 때문에 Element Tree와 연결되어 있습니다.