Widget Tree란?

• UI의 구조와 구성 방식을 나타내며, Flutter 앱에서 UI를 구성하는 가장 기본적인 개념입니다.
• 각 UI 요소는 Flutter에서 모두 위젯으로 표현되고 이러한 위젯들이 계층 구조로 모여 앱의 화면을 형성합니다.
• 위젯 트리는 부모 위젯이 자식 위젯을 포함하는 방식으로 구성되어 있어 트리 모양의 계층 구조를 가지게 됩니다.

Flutter의 위젯 트리는 두 가지 유형의 트리로 구성됩니다.

Widget Tree: 이 트리는 UI의 선언적 구조를 정의하며 각 위젯이 어떤 요소를 포함하는지 정의합니다.
Element Tree: 실제로 위젯이 화면에 렌더링되는 순간 생성되며, 위젯의 상태와 생명 주기를 관리합니다.

간단한 Flutter 예제를 통해 위젯 트리를 알아볼까요?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Widget Tree Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Hello, Flutter!'),
              ElevatedButton(
                onPressed: () {},
                child: Text('Click me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드를 간략하게 해석하면

• MaterialApp: 앱의 전체 설정을 관리하는 최상위 위젯입니다. 화면 구조와 테마, 라우팅 등을 설정할 수 있습니다.

• Scaffold: 앱의 기본 레이아웃 구조로 AppBar와 Body를 포함합니다. 이외에 floatingactionbutton, bottomnavigationbar 등 다양한 arguments 이 있습니다.

• AppBar: 상단에 표시되는 앱의 타이틀 바입니다. 여기에는 title로 텍스트 위젯을 설정하여 앱 이름을 표시합니다.

• Center: 화면의 중앙에 자식 위젯을 배치하는 역할을 합니다.

• Column: 자식 위젯들을 세로로 나열할 수 있는 위젯입니다. 여기서는 Text와 ElevatedButton 위젯이 포함되어 있습니다. 자주 사용되는 위젯으로 앞으로 더 자세히 다룰 예정입니다.

• Text: 간단한 텍스트를 화면에 표시합니다.

• ElevatedButton: 클릭 가능한 버튼을 나타내며, onPressed 콜백을 통해 버튼 클릭 시의 동작을 설정할 수 있습니다.

위젯 트리의 계층을 깊이 구성하다 보면 위젯의 중첩이 심화될 수 있으므로, 위젯을 적절히 분리하고 함수나 클래스 형태로 리팩토링하여 가독성을 높이는 것이 중요합니다.

✓ flutter에서 위젯 트리를 잘 활용하면 효율적이고 유지보수하기 쉬운 UI를 만들 수 있습니다.