[Flutter] Widget Tree / Tree 란 무엇인가?

 

 

Tree란 ?

Flutter에 있는 3가지의 Tree를 알아보겠습니다.

 

 

 

 

 

Widget Tree

위젯 트리는 우리가 코드로 작성한 위젯들을 트리 형식으로 표현한 것입니다. 위젯 트리는 immutable 한 특성을 가지고 있어 트리가 변경되면 파기됐다가 다시 재생성 됩니다. 위젯 트리는 Element Tree와 1 대 1로 연결되어 있습니다.

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Row(
        children: [
          StlColorTile(),
          StlColorTile(),
        ],
      ),
    ),
  );
}

이러한 코드를 작성했다면 위젯 트리는 다음과 같을 것입니다.

 

 

 

 

 

Element Tree

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

 

사진처럼 Widget Tree와 Element Tree 는 1 대 1로 연결되어 있습니다.  해당 사진은 Stateless 위젯을 기준으로 보여준 Tree 예시입니다. 즉 상태가 없는 트리인 것입니다. 상태가 있는 Stateful 위젯은 어떨까요?

 

 

Stateless 기준 트리에서는 "red" 와 "blue" 가 위젯 트리에 있었습니다. 하지만 위에 사진처럼 Stateful 기준의 트리에서는 상태가 존재하는 트리이기 때문에 "red" 상태와 "blue" 상태가 Element Tree에 추가된 모습입니다. Element Tree는 위젯 트리의 상태를 관리하기 때문이죠.  우리가 일반적으로 Stateful Widget 을 사용하면 상태가 있다고 라고 말하는데요 여기서 상태는 Element Tree에 있는 상태를 뜻합니다.

 

 

 

 

 

 

RenderObjectTree

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

 

 

 

 

 

다음 글을 이어서 보시면 Tree에 대해 더 이해하실 수 있습니다.

 

https://jutole.tistory.com/71

[Flutter] Key 란 무엇인가?