Widget Tree: 개념, 구조 및 위젯 트리에서의 역할

Flutter에서 Widget Tree란?

Widget Tree는 Flutter에서 사용자 인터페이스의 선언적 설명으로, 중첩된 위젯의 트리로 구축됩니다. 각 위젯은 UI의 일부(구성, 표시 매개변수, 상호작용 시 동작)를 정의합니다. 개발자는 현재 애플리케이션 상태에서 인터페이스가 어떻게 보여야 하는지 설명하고, Flutter는 그 설명을 화면의 픽셀로 변환합니다.

Flutter의 선언적 접근 방식

개발자가 인터페이스 요소를 직접 조작하는 명령형 프레임워크와 달리, Flutter는 선언적 접근 방식을 사용합니다. 애플리케이션 상태가 변경되면 새 Widget Tree가 생성되고 프레임워크는 이전 트리와 새 트리 간의 차이를 계산합니다. 이렇게 하면 렌더링 작업 수가 최소화되고 코드가 더 예측 가능해집니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Widget Tree")),
        body: Center(
          child: Column(
            children: [
              Text("안녕하세요, Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("눌러주세요"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서 Widget Tree는 MaterialApp, Scaffold, AppBar, Center, Column, Text 및 ElevatedButton으로 구성됩니다. 이러한 각 위젯은 트리의 노드입니다. 애플리케이션 상태가 변경되면 Flutter는 build 메서드를 다시 호출하고 결과를 이전 트리와 비교합니다.

Widget Tree 구조: 루트 및 자식 위젯

Widget Tree는 runApp 메서드에 전달되는 루트 위젯으로 시작합니다. 루트 위젯은 일반적으로 MaterialApp, CupertinoApp 또는 WidgetsApp이며 애플리케이션의 전역 설정을 정의합니다. 루트에서 트리는 자식 위젯으로 분기되며, 각각은 자신의 하위 요소를 포함할 수 있습니다.

단일 자식 및 다중 자식 위젯

Flutter의 위젯은 단일 자식(child 매개변수를 통해 하나의 자식 허용)과 다중 자식(children을 통해 자식 목록 허용)으로 나뉩니다. 단일 자식 예: Center, Padding, SizedBox, Container. 다중 자식: Column, Row, Stack, ListView, GridView. 이 차이는 Widget Tree 구조에 영향을 미칩니다. 다중 자식 위젯은 더 넓은 트리를 만들고 단일 자식 위젯은 더 깊은 트리를 만듭니다.

트리에서 BuildContext의 역할

BuildContext는 Widget Tree에서 위젯의 위치입니다. 각 위젯은 고유한 BuildContext를 가지며, build 메서드에 전달되고 부모 위젯, 테마, MediaQuery 및 기타 InheritedWidget에 액세스하는 데 사용됩니다. BuildContext는 위젯과 Element Tree의 해당 요소 간의 브리지 역할을 합니다.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final mediaQuery = MediaQuery.of(context);
    return Container(
      color: theme.colorScheme.primary,
      child: Text(
        "화면 너비: ${mediaQuery.size.width}"
      ),
    );
  }
}

이 예제에서 BuildContext는 테마와 화면 크기를 얻는 데 사용됩니다. Flutter는 Widget Tree를 거슬러 올라가 가장 가까운 Theme과 MediaQuery(InheritedWidget)에 액세스합니다. 이는 컨텍스트가 위젯을 계층 구조의 위치에 연결하는 방법을 보여줍니다.

Flutter가 시작 시 Widget Tree를 구축하는 방법

Flutter 애플리케이션이 시작되면 runApp 함수가 호출되어 루트 위젯을 받아 Widget Tree 구축을 시작합니다. 이 프로세스는 세 단계로 구성됩니다: 위젯 구성 생성, Element Tree 형성, 실제 렌더링을 위한 RenderObject Tree 구축.

1단계: 루트 위젯 생성

runApp 함수는 WidgetsFlutterBinding을 통해 루트 요소를 생성하여 프레임워크를 그래픽 엔진에 연결합니다. 루트 위젯이 트리에 배치되고 Flutter는 build 메서드를 호출하여 자식 위젯으로 채웁니다. 각 build 호출은 Widget Tree의 새 하위 그래프를 생성합니다.

2단계: 초기 레이아웃

Widget Tree 구축 후 Flutter는 초기 레이아웃을 수행하여 모든 위젯의 크기와 위치를 계산합니다. 이 프로세스는 루트에서 시작하여 트리 아래로 전파됩니다. 각 위젯은 부모로부터 제약 조건을 받고 계산된 크기를 반환합니다. 크기가 일치하지 않으면 Flutter는 레이아웃 오류를 생성합니다.

3단계: 화면에 렌더링

레이아웃 완료 후 Flutter는 각 위젯을 렌더링합니다. RenderObject는 인터페이스 설명을 GPU가 Skia 또는 Impeller를 통해 실행하는 그래픽 명령으로 변환합니다. Widget Tree에서 픽셀까지의 전체 프로세스는 초당 최대 120프레임으로 상태 변경 시마다 반복됩니다.

트리 계층 구조에서 StatelessWidget과 StatefulWidget

StatelessWidget은 내부 변경 가능 상태가 없는 위젯입니다. 그 모양은 생성자를 통해 전달된 입력 매개변수에 의해 완전히 결정됩니다. 매개변수가 변경되지 않은 경우 StatelessWidget은 다시 빌드되지 않습니다. 이는 성능 측면에서 가볍습니다.

StatelessWidget 사용 시기

아이콘, 텍스트 레이블, 장식 구분선 및 내부 로직이 없는 단순 버튼과 같은 정적 인터페이스 요소에는 StatelessWidget을 사용하세요. Flutter 문서에 따르면 일반적인 애플리케이션의 약 70% 위젯이 StatelessWidget일 수 있으며, 이는 가비지 수집기 부하를 줄이고 리빌드를 가속화합니다.

StatefulWidget 및 상태 관리

StatefulWidget은 위젯 재구축 사이에 지속되는 State 객체를 생성합니다. 상태가 변경되면(setState를 통해) Flutter는 위젯을 “더티”로 표시하고 다음 프레임에서 재구축합니다. StatefulWidget은 입력 필드, 애니메이션, 타이머 및 동적 목록과 같은 대화형 요소를 가능하게 합니다.

class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("카운트: $_count"),
        ElevatedButton(
          onPressed: () {
            setState(() => _count++);
          },
          child: Text("증가"),
        ),
      ],
    );
  }
}

이 예제에서 StatefulWidget은 setState를 사용하여 카운터를 업데이트합니다. 상태가 업데이트되면 Flutter는 Widget Tree의 변경된 부분(CounterWidget과 그 하위 요소)만 재구축합니다. 부모 위젯은 재구축되지 않으며, 이는 Flutter 선언적 모델의 핵심 이점입니다.

Widget Tree가 Element Tree와 연결되는 방식

Widget Tree는 구성 레이어이고, Element Tree는 위젯과 실제 렌더링 간의 중간 연결입니다. Widget Tree의 각 위젯은 Element Tree에 요소를 생성하며, 이 요소는 위젯에 대한 참조를 저장하고 수명 주기를 관리합니다. 이 아키텍처를 통해 Flutter는 변경 사항을 효율적으로 처리할 수 있습니다.

위젯에서 요소 생성

Flutter가 처음으로 위젯을 만나면 createElement 메서드를 호출하여 해당 요소를 생성합니다. StatelessWidget의 경우 StatelessElement가 생성되고, StatefulWidget의 경우 StatefulElement가 생성되며 State 객체도 인스턴스화합니다. 요소는 위젯이 다시 생성되어도 재구축 주기 사이에 지속됩니다.

Element Tree의 키(Keys) 메커니즘

Key는 Flutter가 이전 Widget Tree와 새 Widget Tree의 위젯을 일치시키는 데 도움이 되는 식별자입니다. 위젯에 Key가 있으면 Flutter는 트리에서의 위치 대신 Key를 사용하여 해당 요소를 찾습니다. 키는 요소의 순서가 변경될 수 있는 동적 목록으로 작업할 때 필요합니다.

ListView(
  children: items.map((item) => ListItem(
    key: ValueKey(item.id),
    data: item,
  )).toList(),
)

Key가 없으면 Flutter는 위치별로 요소를 일치시켜 순서 변경 시 상태가 잘못 보존될 수 있습니다. 고유 식별자가 있는 ValueKey는 각 요소가 목록에서의 위치에 관계없이 상태를 유지하도록 보장합니다.

Widget Tree가 성능에 미치는 영향

Widget Tree 구조는 Flutter 애플리케이션 성능에 직접적인 영향을 미칩니다. 중첩된 위젯이 많은 깊은 트리는 레이아웃 단계에 더 많은 시간이 필요하고 메모리 사용량이 증가합니다. Flutter DevTools는 Widget Tree를 분석하고 병목 현상을 식별하는 도구를 제공합니다.

과도한 중첩

각 중첩 수준은 레이아웃 및 페인트 중에 추가 계산을 추가합니다. 깊은 체인 중첩 대신 더 평평한 구조를 사용하세요. 예를 들어 Expanded가 있는 Row는 Align이 있는 여러 중첩 Container를 대체할 수 있습니다. Flutter Team에 따르면 트리 최적화는 레이아웃 시간을 최대 40%까지 줄일 수 있습니다.

• 레이아웃 — 각 부모는 자식 위젯에 제약 조건을 전달하고 크기를 다시 받으며, 깊은 중첩 시 계산 체인이 생성됩니다.
• 페인트 — 각 위젯은 렌더링을 위한 별도 레이어를 만들 수 있으며, 과도한 중첩은 레이어 수를 증가시킵니다.
• 메모리 — Element Tree의 각 요소는 메모리를 차지하며, 과도한 위젯은 리소스 소비를 증가시킵니다.

Widget Tree 분석 도구

Flutter DevTools는 실시간으로 현재 Widget Tree를 표시하는 “Widget Inspector” 도구를 제공합니다. 개발자는 화면의 모든 위젯을 선택하여 트리에서의 위치, 매개변수 및 레이아웃 제약 조건을 확인할 수 있습니다. 이를 통해 예기치 않은 중첩, 과도한 리빌드 및 크기 문제를 식별할 수 있습니다.

최적화를 위한 RepaintBoundary

RepaintBoundary는 독립적인 렌더링을 위해 Widget Tree의 일부를 격리하는 위젯입니다. RepaintBoundary 내부의 콘텐츠가 변경되면 전체 화면이 아닌 해당 영역만 다시 칠해집니다. 애니메이션, 목록 및 자주 업데이트되는 요소에는 RepaintBoundary를 사용하세요.

RepaintBoundary(
  child: CustomPaint(
    painter: MyPainter(),
    child: SizedBox(
      width: 200,
      height: 200,
    ),
  ),
)

이 예제에서 RepaintBoundary는 CustomPaint를 별도의 렌더링 영역으로 격리합니다. 이 영역 내의 애니메이션이 업데이트되면 CustomPaint 위젯만 다시 칠해지고 나머지 화면은 변경되지 않습니다. 이는 여러 애니메이션 요소가 있는 복잡한 인터페이스에서 특히 유용합니다.