랜더링 원리

Flutter를 처음 접하면 공홈에 제일 먼저 나오는 내용이지만 이부분에 대한 내용이 지금와서 다시보니 이해가 안됬던 부분이라던가 그냥 무심코 지나갔던 부분들이 다시 머리에 들어오게 되어 정리를 할겸 주제를 정해 글을 쓰게됬다.

우선 가장 중요한 플러터의 랜더링 원리의 기초개념인 widget tree, element tree, render tree에 대해 알아보자.

위젯 트리 (Widget Tree):
- 위젯 트리는 Flutter 앱의 구조를 정의합니다.
- 위젯은 Flutter UI의 기본 구성 단위로, 화면에 무엇을 표시할지를 정의합니다 (예: 텍스트, 버튼, 이미지 등).
- 위젯은 불변성(immutable)을 가지며, 상태가 변경될 때마다 새로운 위젯이 생성됩니다.
- 위젯 트리는 이러한 위젯들의 계층적 구조를 나타냅니다. 예를 들어, Scaffold 위젯 안에 AppBar와 FloatingActionButton이 포함될 수 있습니다.
엘리먼트 트리 (Element Tree):
- 엘리먼트 트리는 위젯 트리를 기반으로 구축됩니다.
- 엘리먼트는 위젯의 인스턴스로, 위젯의 위치를 트리에 유지합니다.
- 각 위젯은 해당하는 엘리먼트를 가지며, 위젯의 상태가 변경되어도 엘리먼트는 재사용됩니다.
- 엘리먼트는 위젯의 라이프사이클(생성, 업데이트, 소멸)을 관리합니다.
렌더 트리 (Render Tree):
- 렌더 트리는 UI를 실제로 화면에 그리는 역할을 합니다.
- 각 엘리먼트는 렌더 객체를 가지고 있으며, 이 객체는 UI의 구체적인 레이아웃과 페인팅(그리기)을 담당합니다.
- 렌더 트리는 위젯의 시각적 표현을 결정하며, 위치, 크기, 색상 등의 세부적인 스타일을 처리합니다.
- 렌더 트리는 성능 최적화를 위해 필요할 때만 업데이트되며, 효율적인 렌더링을 가능하게 합니다.

관련되서 진짜 설명이 잘되어있는 공홈 영상을 첨부한다.

devshw