[Flutter] 19. 위젯 트리, 엘리먼트 트리, 렌더 트리란?

[Flutter] 19. 위젯 트리, 엘리먼트 트리, 렌더 트리란?

 

Flutter에는 UI가 화면에 렌더링되는 과정에는 위젯 트리, 엘리먼트 트리, 렌더 트리라는 세 가지 주요 개념이 있다.

 

1. 위젯 트리 (Widget Tree)

1. 정의: 위젯 트리는 플러터 애플리케이션의 구조와 모양을 정의하는 계층적 트리이다.
2. 역할: 앱 화면에 표시할 UI 구성 요소를 정의한다. 텍스트, 버튼, 컬럼 같은 위젯을 조합해 화면 구성을 정의하는 코드이다.
3. 특징: 위젯은 불변하며, 사용자가 화면을 변경하면 플러터는 새로운 위젯 트리를 생성한다.

 

2. 엘리먼트 트리 (Element Tree)

1. 정의: 엘리먼트 트리는 위젯 트리를 바탕으로 생성된 트리로, 위젯 인스턴스와 실제 화면 사이를 연결하는 역할을 한다.
2. 역할: 위젯을 구체화해 상태와 연결한다. 각 위젯 인스턴스에 대한 위치와 상태를 유지한다.
3. 특징: 엘리먼트 트리는 위젯의 변경을 추적하여 UI가 효율적으로 업데이트되도록 한다.

 

3. 렌더 트리 (Render Tree)

1. 정의: 렌더 트리는 엘리먼트 트리를 기반으로 한 트리로, 화면에 실제로 그려질 픽셀 정보를 포함한다.
2. 역할: 엘리먼트 트리의 정보를 기반으로 화면의 레이아웃 및 그리기 작업을 수행한다.
3. 특징: Flutter의 렌더링 엔진은 렌더 트리를 사용해 UI를 화면에 빠르고 효율적으로 표시한다.

 

4. 요약

• 위젯 트리: 화면에 보일 구성요소를 정의하는 트리
• 엘리먼트 트리: 위젯과 상태를 연결해 변경을 추적하는 트리
• 렌더 트리: 화면에 그려질 픽셀 정보를 갖고, 실제 렌더링을 수행하는 트리
• 이 과정 덕에 Flutter는 반응형 UI 업데이트를 빠르고 효율적으로 수행할 수 있다.