플러터는 3가지 트리로 구성된다.
1. 세 가지 트리로 분리하는 이유
- 퍼포먼스 최적화를 위함
- 플러터는 위젯으로 관리되며, 그 위젯들은 자주 재구성 됨.
- 트리구조의 특징 때문에 가까운 위젯이 바뀐 경우 그 자손의 위젯을 일일이 재작성한 후 렌더링을 할 필요가 있음. 따라서 플러터의 위젯은 큰 중첩 구조가 대부분이기 때문에 성능 저하가 유발될 것
- 이러한 문제점 해결을 위해 트리를 기능별로 3개로 나누어 역할과 책임을 분리함
2. 세 가지 트리의 종류
- 위젯 트리는 코드 상에서 개발자가 control가능
- element tree와 render tree는 플러터가 control하고, 위젯에 의해 생성됨
💛 위젯 트리
- immutable(불변)인 오브젝트로 구성
- 생성 및 파기 비용이 매우 작도록 설계됨. 즉, 자주 바꿀 수 있는 Widget 트리의 업데이트에 순간적으로 대응할 수 있도록 설계됨
💛 Element tree
- mutable(가변)인 오브젝트로 구성
- 위젯이 하나 생성되면 그에 대응되는 element도 하나 생성됨
- Element 트리는 두 가지 역할을 하는데, 1. 위젯 트리의 상태를 관리하고 2. RenderObject 트리의 라이프사이클을 관리
💛 RenderObject 트리
- RenderObject의 역할은 화면 렌더링과 그리기
- mutable(가변) 객체로 구성됨
- Flutter가 실제로 화면에 표시할 때 참조하는 것은 Widget 트리가 아닌 RenderObject 트리가 됨
3. 세 가지 트리의 관계
- 위젯 트리와 Element 트리, render 트리는 각 요소마다 일대일 맞대응된 관계를 가지고 있음
- Widget은 불변이고 빠르게 생성되고 파기되므로 상태를 가지지 않음. (rebuild)그러나 StatefulWidget에서 setState를 사용하면 값이 다시 작성됨. 이것은 Element 트리가 StateObject라는 상태를 만들고 관리하기 때문에 가능함(reload)
- setState에서 값이 변경되면 stateObject가 dirty가 되어 변경의 필요가 있는 것을 인식하게 됨. 그 후 StateObject가 최신화되고 Element에 대응하는 Widget이 build되어 재작성됨. 이때 Element 트리는 재작성의 비용이 높기 때문에 최대한 재사용을 하게 됩니다.
- Element 트리와 RenderObject 트리는 위젯 트리가 변경되어도 성능을 위해 필요한 만큼 재사용된다는 점이 기억해야 할 포인트
💡 reload vs rebuild
reload는 프레임은 그대로 둔채 부수적인 요소들만 바꾸는 것 타이어나, 핸들만 바꾸는 것. rebuild는 아예 새로운 차를 하나 구입하는 것
(참고) https://velog.io/@dosilv/Flutter-StatelessWidget-StatefulWidget
소통하는 개발자가 꿈입니다!