Flutter Tree & Hot Reload

플러터에는 3가지 트리가 있습니다.

1. Widget Tree

2. Element Tree

3. RenderObject Tree

 

Flutter는 위젯을 사용해 UI를 선언하고, 위젯들은 빈번하게 재생성되는데

만약 화면을 하나의 트리만으로 관리한다면, 부모 위젯의 변화는 모든 자식까지 불필요하게 빌드 및 렌더링을 하게돼

성능 저하가 발생합니다

 

> 한 가지 트리를 여러 레이어로 나누어 해결한다

 

Widget Tree

설계도는 언제든 새로 그려도 부담이 없듯, 단순히 "UI가 어떻게 보여야 하는지"를 정의한다

• 불변 오브젝트
• UI의 설계도
• 생성과 파기 비용이 매우 적어 자주 바뀌어도 부담이 없다
• 상태를 직접 가지지 않음
• 변경시 새 Widget Instance를 만들어 Element에게 전달

Element Tree

• 가변 오브젝트
• Widget과 RenderObject를 이어주는 중재자
• Widget의 인스턴스를 참조하며 상태 관리
• RenderObject의 생성, 재사용, 제거를 관리
• Widget Tree와 1:1 대응

setState를 호출하면 Element가 보관중인 State가 변경 > build 호출 > 새 Widget 반영 > RenderObject 갱신

RenderObject Tree

실제로 그려내는 역할을 담당한다.

• 가변 오브젝트
• 실제 레이아웃을 계산, 그리기 담당
• 성능을 위해 최대한 재사용
• 화면 출력 단계에서 참조되는 것은 Widget이 아니라 RenderObject

 

트리 간 관계

Widget <-> Element

• 1:1 대응

Element <-> RenderObject

• Element가 RenderObject의 생성과 재사용, 파괴를 관리
• 변경이 발생하면 Widget은 새로 생성되지만, Element와 RenderObject는 필요한 부분만 갱신되어 성능을 확보

동작 예시를 보자

class MyCounter extends StatefulWidget {
  @override
  _MyCounterState createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() {
            count++;
          }),
          child: Text('Increment'),
        ),
      ],
    );
  }
}

1. setState() 호출 > Element의 State가 변경됨
2. Element가 새로운 Widget을 build
3. RenderObject는 Text 부분만 다시 렌더링
4. 나머지 UI는 재사용

---

Hot Reload

앱을 다시 시작하지 않고도 코드 변경사항을 즉시 반영하는 기능으로, 앱의 현재 상태를 유지하면서 UI를 빠르게 업데이트한다

 

작동 원리

1. 변경된 코드를 Dart VM에 전달하여 해당 부분만 다시 컴파일한다
2. Flutter 프레임워크는 변경된 트리만 다시 build() 하고, 이떄 기존 Element Tree의 State 객체는 유지된다
3. RenderObject Tree는 변경된 위젯에 필요한 부분만 효율적으로 다시 그린다.

 

위젯 트리를 다시 생성하고 UI를 새로 그리지만 기존 상태는유지하며

변경된 부분만 빠르게 갱신하기에 Hot Reload가 가능하다.