🌳
위젯 트리 이해하기
Flutter UI의 근본 — 모든 것은 위젯이다
Flutter의 핵심 철학은 '모든 것이 위젯(Everything is a Widget)'입니다. 화면에 보이는 것뿐 아니라 레이아웃(Row, Column), 스타일(Padding, Center), 제스처(GestureDetector)까지 모두 위젯입니다.
Widget Tree는 선언적(Declarative) UI를 구성하고, Element Tree는 위젯의 인스턴스를 관리하며, RenderObject Tree가 실제 화면에 그립니다.
build() 메서드가 호출될 때마다 Widget Tree가 재생성되지만, Element Tree는 diff 알고리즘으로 최소한만 업데이트됩니다.
구현 순서
1
Widget(설계도) → Element(실체) → RenderObject(렌더링) 3단계 이해
2
Flutter DevTools의 Widget Inspector로 트리 구조 시각화
3
const 위젯 사용으로 불필요한 rebuild 방지
4
Key 개념 이해 — 리스트에서 Element 매칭에 필수
장점
- ✓ 선언적 UI로 코드가 직관적
- ✓ diff 알고리즘으로 효율적 렌더링
단점
- ✗ 위젯 중첩이 깊어지면 가독성 저하 (Widget Hell)
- ✗ 3개 트리 개념이 초보자에게 혼란스러울 수 있음
사용 사례
성능 최적화 시 불필요한 rebuild 추적
복잡한 UI에서 레이아웃 디버깅