03. 위젯 트리 구조, DevTools 로 Widget Tree 보는 방법

오늘 배울 것

모든 Flutter 화면은 build() 함수 안에서 위젯 트리(Tree) 구조로 만들어집니다. 이 구조를 이해해야 화면 UI를 구성하고 그리기가 수월합니다.

 

오늘은 실습을 통해 위젯 트리 구조에 대해 배우고 DevTools 로 Widget Tree 보는 방법을 알아보겠습니다.

 

 

 

위젯 트리 구조 시각화하기

화면에 텍스트, 버튼, 박스 등을 여러 개 중첩시켜서 위젯 트리가 어떻게 쌓이는지 직접 확인해 보겠습니다.

 

아래 코드를 main.dart에 붙여 넣고 앱을 실행해 주세요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Widget Tree 실습')),
        body: Container(
          color: Colors.grey[200],
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  color: Colors.amber,
                  padding: const EdgeInsets.all(16),
                  child: const Text(
                    '나는 Text 위젯이야',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('나는 Button 위젯'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

 

실행한 iOS 시뮬레이터 모습입니다.

 

body 속성을 통해 화면의 본문 영역이 그려지고 있는데요.

 

Container 안에 Center

Center 안에 Column

Column 안에 Container 와 Text, SizedBox, ElevatedButton

 

이런 식으로 위젯이 계층적으로 중첩되어 있는 걸 볼 수 있습니다. 이게 바로 위젯 트리 구조입니다.

 

위젯 트리 구조를 보기 쉽게 시각화한다면 이렇게 표현할 수 있는 거죠.

MaterialApp
  └── Scaffold
       └── AppBar
       └── Body
           └── Center
               └── Column
                   ├── Container
                   │    └── Text
                   ├── SizedBox
                   └── ElevatedButton

 

 

지금은 단순한 몇 개의 위젯으로만 화면을 구성했지만 실제 서비스를 개발할 때에는 굉장히 많은 위젯들을 사용해요. 그래서 코드가 몇 백 줄씩 길어질 수 있죠.

 

위젯이 너무 많다면 일부분을 별도의 위젯으로 분리하여 사용하는 것이 좋습니다. 위젯을 분리하면 개발자 입장에서 코드 가독성을 높여 쉽게 구조를 파악할 수 있습니다. 아래 코드와 화면을 봐주세요.

 

 

여기서는 CounterPage 와 IncreaseButton 위젯을 분리했습니다. CounterPage 는 상태 값을 가지는 StatefulWidget, IncreaseButton 는 상태 값을 가지지 않는 StatelessWidget 이죠.

 

개발자는 상위 위젯인 MyApp 만 보더라도 '숫자를 세는 화면이 홈 화면이구나'라고 알 수 있기 때문에 가독성이 높아지죠. 만약 세부 구현이 궁금하다면 하위 위젯으로 차례대로 살펴보면 됩니다.

 

위 이미지의 코드를 전체 위젯 트리로 시각화하면 다음과 같습니다.

MaterialApp
   └── CounterPage(StatefulWidget) *분리한 위젯
          └── Scaffold
                ├── AppBar
                │     └── Text
                └── body: Center
                      └── Column
                            ├── Text
                            ├── SizedBox
                            └── IncreaseButton(StatelessWidget) *분리한 위젯
                                  └── ElevatedButton
                                        └── Text

 

 

 

DevTools 로 Widget Tree 보는 방법

Flutter DevTools는 앱 구조를 시각적으로 보고 디버깅할 수 있는 도구입니다. 특히 실시간으로 위젯 트리를 볼 수 있어서 구조를 이해하는데 큰 도움을 줍니다.

 

DevTools 을 열려면 단축키 Command + Shift + P -> 'Dart: Open DevTools' 을 입력, 선택해 주세요.

 

이어서 나오는 선택 메뉴에서 'Open Widget Inspector Page' 를 선택하면 아래 이미지처럼 Widget Inspector 탭이 열립니다.

 

위 이미지는 count 를 표시하는 Text 위젯을 선택한 화면입니다. 우리가 배운 위젯 트리 구조가 보이시나요?

 

만약 위에 있는 Select 모드를 활성화하고 다시 Text 위젯을 선택하면 iOS 시뮬레이터에서 선택한 위젯을 화면에 표시해 줍니다. 이를 통해 화면에 그려진 위젯이 어떤 위젯인지 쉽게 찾을 수 있는 거죠.

 

 

DevTools는 Widget Tree 외에도 성능이나 메모리 네트워크나 로그 등을 통해 성능향상과 디버깅을 하는데 유용한 도구입니다. 이에 대해서는 추후 다루어보겠습니다.

 

 

 

Recap

- 여러 위젯이 중첩되어 위젯 트리를 만듭니다.
- 위젯이 많아지면 일 부분을 별도 위젯으로 분리하면 가독성이 좋아집니다.

- DevTools을 이용하면 실시간으로 위젯 트리를 볼 수 있어서 구조 파악이 용이합니다.

- Select 모드를 활성화하면 쉽게 화면 속 위젯을 찾을 수 있습니다. 

 

 

다음 글에서는 Flutter 에서 자주 사용하는 레이아웃 위젯들을 살펴보겠습니다.