Tree

Flutter에는 세가지 종류의 Tree가 존재함

플러터는 build 단계에서 위젯 트리(widget tree)와 엘리먼트 트리(element tree)를 만들고, layout 단계에서 렌더 트리(render tree)를 만든 다음 paint 단계에서 가장 마지막에 만든 렌더 트리를 써먹는다. 앞서 만든 위젯 트리, 엘리먼트 트리는 모두 렌더 트리를 위한 추진력을 얻기 위함 만들기 위해서 생성하는 트리다. 그리고 엘리먼트 트리 역시 위젯 트리를 바탕으로 만들어진다.

Widget tree

코드로 작성한 위젯들을 트리 형식으로 표현한 것
immutable 한 특성을 가지고 있어 트리가 변경되면 파기됐다가 다시 생성됩니다.
widget tree : element tree = 1:1

@override
Widget build(BuildContext context) {
	return SafeArea(
    	child: Row(
        	children: [
            	Text('gg'),
                Text('gg'),
            ],
        ),
     );
}

(최상위) SafeArea
(상위) Row
(하위) Text / (하위) Text

Element tree

immutable한 특성을 가지고 있는 위젯 트리의 상태를 대신 관리하고 RenderObject Tree 의 라이프 사이클을 관리하는 Tree

• ComponentElement: 트리 구조에서 다른 객체를 포함하는 역할만 한다. 화면에 출력할 정보는 가지지 않는다.

• RenderObjectElement: 화면에 출력할 정보를 가진다.

stateless widget이어서 상태가 포함되어있음

stateful widget이어서 state 따로 표시되어있음

상태는 element tree에 있는 상태를 의미

RenderObject tree

실제 Flutter가 화면을 그리기 위해 참조하는 RenderObject를 표현한 트리
Element Tree에서 RenderObject Tree의 라이프 사이클을 관리하기 때문에 Element Tree와 연결되어 있음

cf) https://jutole.tistory.com/70