플러터 기본기 다지기 - 위젯트리, 엘리먼트트리, 렌더트리 란 뭘까?

 

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

1. 위젯 트리 (Widget Tree)

• 정의: 위젯 트리는 Flutter 애플리케이션의 구조와 모양을 정의하는 계층적 트리입니다.
• 역할: 앱 화면에 표시할 UI 구성 요소를 정의합니다. Text, Button, Column 같은 위젯을 조합하여 화면 구성을 정의하는 코드입니다.
• 특징: 위젯은 불변(immutable)하며, 사용자가 화면을 변경하면 Flutter는 새로운 위젯 트리를 생성합니다.

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

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

3. 렌더 트리 (Render Tree)

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

요약

• 위젯 트리: 화면에 보일 구성요소를 정의하는 트리.
• 엘리먼트 트리: 위젯과 상태를 연결하여 변경을 추적하는 트리.
• 렌더 트리: 화면에 그려질 픽셀 정보를 갖고 실제 렌더링을 수행하는 트리.

이 과정 덕분에 Flutter는 반응형 UI 업데이트를 빠르고 효율적으로 수행할 수 있습니다

 

 

기초적인 Flutter 화면을 구성하는 패턴

1. 'package:flutter/material.dart' 임포트
2. MaterialApp으로 메인 위젯 트리 감싸기
3. title과 theme과 같은 속성 설정
4. home : 속성을 주 페이지로 정의
5. Scaffold:
   • 앱의 시각적 레이아웃에 대한 기본 구조 제공
   • appBar 및 body와 같은 속성 설정
     • 레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)
       • 각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함
     • body에 실제 화면 관련 위젯 정의

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// 상태 기반 UI
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 앞으로 MaterialApp 안에서 위젯들을 선언해 보자.
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Flutter',
      theme: ThemeData(
        colorScheme: ColorScheme.light(primary: Colors.redAccent),
        primarySwatch: Colors.red
      ),
      // 시각적 레이웃 구성요소를 잡아 주는 녀석이다.
      home: Scaffold(
        appBar: AppBar(title: Text("My Flutter"), backgroundColor: Colors.blue,),
      ),
    );
  }
}