📖 위젯이 화면에 그려지기까지의 과정
🌱 위젯 트리 (Widget Tree) - 시작점
Flutter에서 화면이 그려지는 과정은 위젯 트리에서 시작된다.- 개발자가 작성한
build()함수는 여러 위젯들을 조합해 위젯 트리를 만든다.- 위젯은 단순히 화면의 설계도 역할을 하며 직접 화면에 그려지는 요소는 아니다.
🌿 엘리먼트 트리 (Element Tree) - 연결 단계
Flutter는 위젯 트리를 기반으로Element트리를 생성한다.Element는 위젯과 실제 렌더링 객체를 연결하는 중간 다리이다.- 각
Element는 위젯의 상태 (State)를 기억하고 새 위젯과 비교하여 필요한 부분만 갱신한다.- 이 덕분에
Flutter는 매우 효율적인 UI 업데이트가 가능하다.
🌳 렌더 오브젝트 트리 (Render Object Tree) - 실제 렌더링
Element가 생성되면 화면에 실제로 그릴RenderObject가 만들어진다.RenderObject는 각 위젯의 크기, 위치, 그리기를 담당한다.
🖌️ 렌더링의 3단계
1️⃣
Layout(레이아웃)
- 각 위젯의 크기와 위치를 계산한다.
2️⃣
Painting(페인팅)
- 계산된 위치에 따라 색상, 이미지, 텍스트 등을 그린다.
3️⃣
Compositing(합성)
- 여러 레이어를 결합해 GPU를 통해 실제 화면에 표시한다.
🔁 상태 변경 시 과정
- 상태가 변경되면
setState()가 호출되고Flutter는 위젯 트리를 다시 빌드 한다.- 하지만 전체를 다시 그리는 것이 아니라 변경된 부분만 다시 계산하고 갱신한다.
- 이 덕분에
Flutter는 빠르고 부드러운 화면 업데이트가 가능하다.
🌈 정리
Flutter의 화면은 위젯 → 엘리먼트 → 렌더 오브젝트 순으로 이어지는 구조를 통해 만들어진다.- 이 세 단계가 순서대로 동작하면서 최종적으로 화면이 완성된다.
