Flutter - Widget, Element, Render Object tree

Widget 트리만 알고 있었는데,

면접에서 받은 질문을 통해 플러터는 총 3개의 트리가 존재한다는 걸 알게됐다..

 

아래와 같은 3개의 트리가 존재하는데, 영역을 나눈 이유는 퍼포먼스를 최적화하기 위해서라고 한다.

   - Widget

   - Element

   - Render Object

 

Widget tree 는 아마 플러터를 사용하는 사람들에겐 가장 익숙한 tree가 아닐까 싶다.

우선 Widget은 immutable 이며 공식 문서에서 설명하는 바로는 Widget은 Element의 설정에 대한  description이라고 한다.

즉, widget을 개발하며 추가하는 property와 같은 정보들이 widget tree에 담기게 된다.

 

Element tree 에서 관리되는 element는 widget의 인스턴스로 widget과는 다르게 mutable obeject이다.

element tree의 역할은 크게 widget tree의 상태를 관리해주고(widget tree와 1:1관계) render object tree의 lifecycle 을 관리해준다. 앞서 언급한 것처럼 widget tree가 immutable이기 때문에 widget의 상태 관리를 담당한다. Widget이 만들어지고 rendering이 되는 과정 사이에서 중재를 하는 영역으로 이해하면 될 것 같다. Element tree는 StateObject 상태 객체를 만들고 관리하여 setState 등에 의해 화면 갱신이 필요한 상황에 StateObject를 최신화하여 변경된 widget이 rebuild될 수 있게 도와준다 

 

Render Object Tree 는 실제 widget을 화면에 그려주는 역할을 한다. Render object 는 mutable이며 flutter engine이 widget을 그릴 때 실제 참조하는 객체는 render object가 된다.