[flutter] 플러터 Widget 트리, Element 트리, RenderObject 트리

플러터는 위젯 트리로 구축된다는 이야기는 잘 알려져 있지만 단순히 Widget 트리 구조만으로 플러터의 화면이나 요소가 만들어지는 건 아닙니다. 위젯 트리 외에도 Element 트리, RenderObject 트리가 존재합니다. 이 세 개의 트리가 어떤 관계가 있는지 알아보겠습니다.

---

Widget, Element, RenderObject 세 가지 트리로 분리하는 이유

세 개의 트리로 나누는 목적은 결론적으로 말하면 퍼포먼스 최적화입니다.

플러터는 위젯으로 관리되며 그 위젯들은 자주 재구성됩니다. 위젯들은 상태를 가지고 있으며 화면에 표시되기 위해서는 사이즈나 레이아웃에 맞춰 조절도 필요하게 됩니다.

하나의 트리로 관리하다면 단순해져서 이해는 편하겠지만, 트리구조의 특징 때문에 가까운 위젯이 바뀐 경우 그 자손의 위젯을 일일이 재작성한 후 랜더링을 할 필요가 있습니다. 플러터의 위젯은 큰 중첩 구조가 대부분이기 때문에 성능 저하가 유발될 것입니다. 따라서 이러한 문제점을 해결하기 위해 트리를 기능별로 3개로 나누어 역할과 책임을 분리하고 있습니다.

 

세 가지 트리의 개요

위젯 트리

Widget 트리는 immutable(불변)인 오브젝트로 구성되어 있습니다. 위젯 트리는 생성 및 파기 비용이 매우 작도록 설계되었습니다. 즉, 자주 바꿀 수 있는 Widget 트리의 업데이트에 순간적으로 대응할 수 있도록 설계되어 있습니다.

 

Element 트리

Element 트리는 mutable(가변)인 오브젝트로 구성되어 있습니다. Element 트리는 두 가지 역할을 하는데, 위젯 트리의 상태를 관리하고, RenderObject트리의 라이프사이클을 관리합니다. 위젯 트리가 불변이기 때문에  Element는 위젯 트리를 대신해서 상태를 관리해 주는 역할을 대신해 줍니다. 즉 Element트리는 위젯 트리와 RenderObject 트리의 중재 역할을 해준다고 볼 수 있습니다.

 

RenderObject 트리

RenderObject의 역할은 화면 렌더링과 그리기입니다. RenderObject 트리는 mutable(가변) 객체로 구성됩니다. 따라서 Flutter가 실제로 화면에 표시할 때 참조하는 것은 Widget 트리가 아닌 RenderObject 트리가 됩니다.

 

위젯 트리와 Element 트리의 관계

위젯 트리와 Element 트리는 일대일에 해당하는 요소를 가지고 있습니다. Widget은 불변이고 빠르게 생성되고 파기되므로 상태를 가지지 않습니다. 그러나 StatefulWidget에서 setState를 사용하면 값이 다시 작성됩니다. 이것은 Element 트리가 StateObject라는 상태를 만들고 관리하기 때문에 가능합니다.

setState에서 값이 변경되면 stateObject가 dirty가 되어 변경의 필요가 있는 것을 인식하게 됩니다. 그 후 StateObject가 최신화되고 Element에 대응하는 Widget이 build되어 재작성됩니다. 이때 Element 트리는 재작성의 비용이 높기 때문에 최대한 재사용을 하게 됩니다.

Element 트리와 RenderObject 트리는 위젯 트리가 변경되어도 성능을 위해 필요한 만큼 재사용된다는 점이 기억해야 할 포인트입니다.

---

여기까지 읽어주셔서 감사합니다.