[flutter] 플루터의 3요소, Widget Tree, Element Tree, RenderObject Tree 에 대해서 알아보자 (setState를 하면 일어나는 일들)

플루터에서 위젯의 상태를 변경하기 위해서 setState를 하면 어떠한 일들이 일어날까?

 

Flutter는 모든 것이 위젯이다

이 특징이 있음을 꼭 기억하자 (엄밀히 따지면 Flutter에서 위젯이외의 객체도 일부 존재하지만 대부분이 위젯이고 일반적으로 프로그래밍을 할때 위젯이 아닌경우를 신경 쓸 일이 없으므로 모든것이 위젯이라고도 할 수 있다.)

 

플루터는 UI를 그려내기 위해 Widget Tree, Element Tree, Render Tree 3가지를 사용합니다.

이 세가지를 왜 사용할 까요? 이는 곧 성능과 관련이 있습니다. 만약에 플루터가 위젯트리 하나로만 되어있었다면 정말 수시로 렌더링이 자주발생하는 앱같은 경우에는 모든 위젯이 다시 렌더링되어야 하는 문제가 있겠죠 이를 3가지로 나누어 각각 적절한 시점에 따로 렌더링 되어 성능적으로 이득을 가져갑니다.

1. 위젯 트리(Widget Tree)

위젯트리는 말 그대로 위젯 객체로 이루어져 있습니다. 각 객체는 immutable(불변) 구성 되어 있어 생성 및  파기 비용이 매우 작게 설계되어 있습니다.

 

2. 요소 트리(Element Tree)

요소트리는 mutable로 구성되어 있습니다. 요소 트리는 위젯 트리의 상태를 관리하고, 렌더 트리의 LifeCycle을 관리합니다.

 

3. 렌더 트리(RenerObject Tree)

플루터가 실제로 화면을 표시할 때는 RenderObject Tree를 참조합니다.

 

결론

위젯트리와 요소 트리는 일대일 관계를 가지고 있으며, 간단하게는 상태를 분리하여 사용하는 목적으로 분리되어 사용한다고 생각하면 됩니다. 위젯 트리의 위젯객체는 불변이고 빠르게 생성되고 제거될 수 있도록 내부가 구성 되었다. 이러한 위젯과 매칭되는 요소 객체는 상태객체(StateObject)를 가지고 상태의 변경에 따라 요소객체와 매칭된 위젯을 build하여 상태변경을 반역하게 됩니다. 이때 요소트리와 렌더트리는 가능하면 재사용 되도록 설계되어 있습니다.

 

 

즉, 플루터는 상태와 렌더링 목적의 기능을 3가지 트리로서 분리하고, 변화가 발생했을 때 비용이 적고 변화가 잦은 위젯에 관해서만 재구성 함으로서 비용을 최소화 하고 성능을 최적화하는 목적을 가지고 있습니다.