Flutter - Widget, Element, RenderObject
01 Nov 2021 | FlutterFlutter 에는 3개의 Widget Tree, Element Tree, RenderObject Tree 가 있습니다. 그리고 이 3개의 트리를 이용해서 화면을 구성합니다.
Widget Tree
Widget 을 구성하는 트리입니다. Widget 은 화면을 구성하는 속성을 포함하고 있으며 immutable 이기 때문에 변경이 불가능합니다. Widget 은 Element 와 RenderObject 를 생성합니다. StatefulWidget의 경우 State Object가 별도로 존재합니다. Widget 은 Element 를 생성하기 위한 Blueprint(청사진) 이라고 볼 수 있습니다.
Element Tree
Element를 구성하는 트리입니다. Widget이 생성되면 Element가 생성되며 또한 Element 는 Widget 이 RenderObject 를 생성하게끔 합니다. BuildContext 는 Element에 담겨있습니다. 정확히 말하면 Element 는 BuildContext 인터페이스를 implement 합니다. 실제 화면에 붙는 것은 이 Element 라고 볼 수 있습니다.
abstract class Element extends DiagnosticableTree implements BuildContext {
...
}
RenderObject Tree
RenderObject 를 구성하는 트리입니다. RenderObject 는 화면을 그리기 위한 정보를 가지고 있습니다. Flutter 에서 화면을 그릴 때 이 RenderObject 를 참고합니다. StatefulWidget 에서 setState() 를 호출하면 RenderObject 를 업데이트합니다. 실제 화면에 보이는 모든것은 RenderObject 입니다.
Comments