[Flutter] 위젯 트리

Flutter 에는 화면을 구성하는 3개 트리 구조가 존재 한다. 

 

개발자가 코드를 작성하는 위젯 트리(Widget Tree)와 Flutter 프레임워크가 화면을 만들 때 만드는 엘리먼트 트리(Element Tree), 렌더 트리(Render Tree) 이다.

 

위젯은 화면에 보일 뷰를 설명할 뿐 실제 화면에 출력할 대상은 아니다.

 

프레임워크에서 뷰 설명을 보고 위젯 트리를 참조해 실제 화면에 출력할 객체들을 별도의 트리 구조로 만든다.

(플러터 인스펙터[Flutter Inspector]를 통해 위젯의 트리 구조를 확인할 수 있다.)

 

Text 위젯을 사용하면 하위에 RichText 위젯이 자동으로 생성된다. 그리고 각 위젯의 상세 설명에서 어떤 위젯은 renderObject 정보를 가지고 있고 어떤 위젯은 가지고 있지 않는다.

 

이 renderObject를 포함하는 위젯이 실제 화면에 그릴 정보를 가진 위젯이다.

 

Text 는 renderObeject 정보를 갖고 있지 않고 Text 하위의 RichText 가 renderObjcet 정보를 가지고 있다.

 

플러터 프레임워크는 이 위젯 트리를 기반으로 엘리먼트 트리를 만든다.

위젯 트리는 개발자가 작성하는 화면 구성 주문서라고 할 수 있다.

이 주문서를 보고 실제 화면을 구성하는 정보는 프레임워크 내부에서 엘리먼트 트리로 만든다.

위젯 객체 하나당 엘리먼트 객체를 하나씩 만들어 트리를 구성하며, 위젯보다는 더 상세한 정보가 담긴다.

 

엘리먼트 트리는 ComponentElement 와 RenderObjectElement 객체로 구성된다.

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

실제 화면에 출력할 정보는 RenderObjectElement 에 담긴다.

(Text Widget이 ComponentElement 이고 Text Widget의 하위 위젯인 RichText 위젯이 RenderObjectElement 이다.)

 

그런데 엘리먼트 트리의 객체도 실제 화면에 무언가를 출력하지는 않는다. 단지 정보만 담고 있다. 이 엘리먼트 트리 정보를 바탕으로 실제 화면을 출력하는 렌더 트리가 만들어진다.

 

렌더 트리의 객체는 위젯 트리와 직접 연계되지 않는다. 또한 모든 엘리먼트 객체를 대상으로 렌드 트리의 객체가 하나씩 만들어지지 않고, 실제 화면에 출력할 정보를 가지는 RenderObjectElement 에 해당하는 객체로만 구성된다.

렌더 트리를 구성하는 객체는 실제 화면 출력하는 객체이다. RenderObject 에는 RenderDecorateBox, RenderImage, RenderFlex 등 다양한 객체가 사용된다.

 

위젯 트리 외에 엘리먼트 트리, 렌더 트리 등이 존재하는 이유는 화면 렌더링(출력) 속도 때문이다.

화면에 변경 사항이 발생할 때 얼마나 빨리 화면에 반영해 주는가는 프레임워크의 성능을 결정하는 중요한 요소이다.

플러터는 네이티브 앱 수준의 성능을 목표로 하기 때문에 화면에 변화가 있을 때 최적의 알고리즘으로 변경할 부분만 다시 렌더링해서 빠르게 반영하도록 설계되었다.

이 부분을 개발자가 신경쓰지 않기 위해 위젯 트리 외에 엘리먼트 트리, 렌더 트리가 존재하는 것이다.

 

 

 

 

 

 

 

---

http://www.yes24.com/Product/Goods/117206541

Do it! 깡샘의 플러터 & 다트 프로그래밍 - YES24