build method 와 render tree를 모르고 hot reload를 논하지마라

핫리로드가 될 때 화면이 아예 다시 그려지는건가? 라는 의견이 나왔다

 

아닌 것 같은데 왜 아니지 !!!!!!!!!!!!!

설명을 똑바로 못했다

 

왜 설명을 못했을까. 내 문제점은 다음과 같았다

 

1.빌드메서드가 정확히 뭘 하는지 몰랐다.
2.핫리로드랑 빌드메서드의 연관관계를 몰랐다.

 

그렇다면 알아보자 ㄱㄱ

 

The framework replaces the subtree below this widget with the widget returned by this method, either by updating the existing subtree or by removing the subtree and inflating a new subtree, depending on whether the widget returned by this method can update the root of the existing subtree, as determined by calling Widget.canUpdate.

canUpdate method - Widget class - widgets library - Dart API

 

이는 build 메서드가 위젯 트리를 다시 그린다는 뜻으로, 기존의 위젯 트리(subtree)를 업데이트하거나 제거한 후 새로운 트리를 구성한다는 의미이다 

그니까. 빌드 메서드는 위젯트리를 그려주는 애인거다.

 

build() 를 처음 접할 때 흔히 프로그래밍에서 말하는 빌드, "앱 전체를 다시 컴파일하거나 생성한다"는 의미로 혼동했었는데, 헷갈리지말자.

빌드메서드다! 플러터에서 build() 메서드는 이 메서드 호출을 통해 위젯 트리를 구성하는 것으로 사용된다. 혼동금지 !!

 

build() 메서드는 Flutter의 UI를 구성하는 핵심 메서드로, 위젯이 어떻게 화면에 그려져야 하는지를 정의한다.

위젯이 화면이 어떻게 그려져야 하는지 알려주는 총 세가지의 요소가 있다. 

 

• 위젯 트리는 UI의 설계도처럼 어떤 위젯들이 어떻게 배치될지를 설명함
• 엘리먼트 트리는 이 위젯 트리를 기반으로 생성되어 위젯의 상태를 관리하고 업데이트하는 역할을 함
• 렌더링 트리는 엘리먼트 트리의 정보를 기반으로 화면에 그릴 요소들을 실제로 렌더링하는 역할을 수행함.

 

 

Flutter의 모든 위젯은 화면에 그려지기 위해 렌더링 단계가 필요하고, 이때 위젯이 실제로 화면에 표시되는 과정은 Render Tree를 통해 이루어진다.

 

그렇다면 빌드메서드 호출은 화면 전체를 다시 그리는걸까?

NO❗️

 

아까도 언급했듯이 build() 메서드가 호출된다는 것은 위젯 트리(Widget Tree)를 다시 생성한다는 의미다.

하지만 이것이 실제로 화면 전체를 다시 그린다는 것은 아니다

렌더링 단계를 통해 위젯이 어떻게 화면에 표시될지 결정하는 과정을 거치고 마지막으로 렌더 트리(Render Tree)에서는 변경된 부분만 업데이트하고 다시 그려주는것이다. 

 

 

결론

 

핫리로드는 빌드메서드만 호출한다 -> 빌드메서드는 위젯트리를 다시 생성한다 -> 위젯트리는 렌더트리를 통해 화면에서 '변경된 부분'만 다시 그린다 -> 전체를 다시 그려주는 것이 아니다 

 

---

참고 문서 

 

https://blog.logrocket.com/complete-guide-flutter-architecture/
https://docs.flutter.dev/resources/architectural-overview

BuildContext class - widgets library - Dart API

 

Flutter architectural overview

 

A complete guide to Flutter architecture - LogRocket Blog