플러터 강좌, 4.3 위젯 트리

플러터는 구글이 개발한 오픈소스 UI 소프트웨어 개발 키트(SDK)로,
모바일, 웹, 데스크탑 등 다양한 플랫폼에서의 애플리케이션을 작성할 수 있도록 지원합니다.
플러터의 기본적인 개념 중 하나는 ‘위젯’입니다. 이 장에서는 위젯과 위젯 트리에 대해
자세히 살펴보고, 이를 이용해 플러터 애플리케이션을 어떻게 구성하는지 알아볼 것입니다.

1. 위젯이란?

‘위젯’은 플러터에서 UI의 기본 구성 요소입니다. 플러터의 모든 것은 위젯으로 구성되어 있으며,
이는 애플리케이션의 UI를 구성하는데 필요한 모든 요소를 포함합니다.
버튼, 텍스트, 이미지 등 모든 UI 요소는 위젯으로 표현됩니다.
위젯은 두 가지 유형으로 나눌 수 있습니다:

  • 상태 없는 위젯(Stateless Widget): 이 위젯은 상태를 가지지 않으며,
    변하지 않는 UI를 그릴 때 사용됩니다. 예를 들어, 단순한 텍스트나 아이콘을 표시할 때 사용됩니다.
  • 상태 있는 위젯(Stateful Widget): 이 위젯은 상태를 가지며,
    사용자의 상호작용에 따라 UI가 변경되는 경우에 사용됩니다. 예를 들어, 버튼 클릭 시
    색깔이 변하는 경우가 이에 해당합니다.

2. 위젯 트리

위젯 트리는 위젯 간의 계층 구조를 나타내는 트리 형태입니다.
모든 위젯은 다른 위젯의 자식이 될 수 있으며, 이는 종종 패턴과 선형적 구조를 형성합니다.
위젯 트리를 이해하는 것은 플러터 애플리케이션을 효율적으로 설계하고 디버그하는 데
매우 중요합니다.

2.1 위젯 트리의 구조

위젯 트리는 루트 위젯에서 시작되어 아래로 필드를 통해 연결된 자식 위젯들로 확장됩니다.
예를 들어, 일반적으로 AppBar, Scaffold와 같은 위젯이 루트가 되고, 이는 서로 연결된
다양한 하위 위젯들을 포함합니다.
build() 메서드는 이러한 위젯 트리를 정의하고 반환하는 데 사용됩니다.

2.2 위젯 트리 생성하기

Flutter 앱의 기본 구조는 MyApp이라는 Stateless Widget으로 시작이 됩니다.
이 위젯에서 반환하는 것은 위젯 트리의 루트가 됩니다.
다음의 간단한 코드를 통해 위젯 트리의 기본 구조를 살펴보겠습니다: 


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('위젯 트리 예제'),
        ),
        body: Center(
          child: Text('안녕하세요, 플러터!'),
        ),
      ),
    );
  }
}

위 코드는 MaterialApp, Scaffold, AppBar, Center,
Text와 같은 여러 위젯이 어떻게 서로 연결되어 있는지를 보여줍니다.
이러한 구조를 통해 플러터는 UI를 구성하며 사용자에게 시각적으로 표현됩니다.

3. 위젯의 재사용성

위젯 트리를 이해하면 위젯의 재사용성을 높일 수 있습니다.
복잡한 사용자 인터페이스를 구축할 때, 작은 위젯들을 만들어 조합하는
방식으로 큰 위젯을 만들어 나갈 수 있습니다.
특정 기능을 가진 위젯을 공통으로 사용하는 경우, 해당 위젯을
별도의 클래스나 위젯으로 만들어 쉽게 재사용할 수 있습니다.

4. 화면을 구성하는 위젯

플러터에서는 다양한 방식으로 위젯을 구성할 수 있습니다.
다음은 화면 구성 시 자주 사용되는 몇 가지 위젯들입니다:

  • Column: 위젯을 세로 방향으로 나열하는 위젯입니다.
  • Row: 위젯을 가로 방향으로 나열하는 위젯입니다.
  • Stack: 위젯을 겹쳐서 쌓을 수 있는 위젯입니다.
  • ListView: 스크롤 가능한 리스트를 생성하는 위젯입니다.
  • GridView: 그리드 형태로 아이템을 나열하는 위젯입니다.

5. 위젯의 상태 관리

상태 있는 위젯은 사용자 인터페이스의 상태를 관리하는 데 중요한 역할을 합니다.
상태를 관리하는 방법에는 여러가지가 있으며, 다음은 몇 가지 방법입니다:

  • setState(): 가장 기본적인 상태 관리 방법으로, 상태가 변경될 때 UI를 새로 고침합니다.
  • InheritedWidget: 하위 위젯에게 상태를 전달할 수 있는 위젯입니다. 이 방법은 위젯 트리의 상위에서 하위로 데이터 전달을 더 쉽게 합니다.
  • Provider 패키지: 상태 관리를 위해 가장 일반적으로 사용되는 패키지 중 하나입니다.
    이 패키지는 모든 위젯이 손쉽게 상태를 읽고 수정할 수 있도록 합니다.

6. 다양한 위젯의 활용

위젯 트리를 활용하면 복잡하고 다양한 사용자 인터페이스를 쉽게 구현할 수 있습니다.
예를 들어, 다음 코드는 여러 위젯을 포함한 복잡한 레이아웃을 생성합니다: 


@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('다양한 위젯 활용'),
    ),
    body: Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Icon(Icons.home),
            Icon(Icons.favorite),
            Icon(Icons.settings),
          ],
        ),
        Expanded(
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('아이템 $index'),
              );
            },
          ),
        ),
      ],
    ),
  );
}

위 코드는 아이콘들을 가로 세로 형태로 배치한 후,
세로 방향으로 스크롤할 수 있는 리스트를 구현합니다.
이러한 방식으로 위젯을 조합하여 다양한 레이아웃을 만드는 것이 플러터의 매력입니다.

7. 성능 최적화 및 팁

위젯 트리를 사용할 때 성능을 최적화하는 것도 중요합니다.
다음은 성능을 향상시키기 위한 몇 가지 팁입니다:

  • 상태 관리 최적화: 불필요한 setState() 호출을 줄이고,
    위젯이 특정 조건에서만 리렌더링되도록 하세요.
  • const 키워드 사용: 위젯을 const로 선언하면
    불필요한 리렌더링을 방지할 수 있습니다.
  • Lazy Loading: 리스트 뷰 등에서 아이템을 필요한 경우에만
    로드하도록 설정하면 성능을 개선할 수 있습니다.

8. 결론

위젯과 위젯 트리는 플러터 애플리케이션의 핵심 개념으로,
이를 이해하면 더 효과적이고 효율적으로 애플리케이션을 구축할 수 있습니다.
플러터의 강력한 UI 구성 요소들을 활용하여 복잡한 사용자 인터페이스를
손쉽게 구현할 수 있으며, 위젯의 재사용성과 상태 관리 등의 개념을 통해
성능최적화를 꾀할 수 있습니다.
이제 여러분도 플러터의 위젯 트리를 이해하고 활용하여,
원하는 애플리케이션을 더욱 매력적으로 개발해보시기 바랍니다.