플러터 강좌, 4.1 위젯이란?

현대 모바일 애플리케이션 개발의 세계에서, Flutter는 그 유연성과 성능 덕분에 많은 개발자들에게 사랑받고 있습니다. Flutter의 핵심 구성 요소인 위젯(widget)은 UI를 구성하는 기초 단위로, 이를 이해하는 것은 Flutter를 마스터하는 데 필수적입니다. 이번 글에서는 Flutter의 위젯이 무엇인지, 그 중요한 개념과 다양한 사용법에 대해 심도 있게 살펴보겠습니다.

1. 위젯의 정의

Flutter에서 ‘위젯’은 사용자 인터페이스를 구성하는 가장 기본적인 요소입니다. 위젯은 화면에 표시되는 모든 것을 나타내며, 텍스트, 버튼, 이미지, 레이아웃 등 다양한 형식이 있습니다. Flutter는 모든 것을 위젯으로 처리하기 때문에 개발자는 UI의 모든 부분을 위젯으로 구성할 수 있습니다. 이러한 위젯은 다른 위젯과 결합하여 복잡한 UI를 생성할 수 있도록 해줍니다.

2. 위젯의 종류

2.1 상태 비저장 위젯 (Stateless Widget)

상태 비저장 위젯은 사용자 인터페이스의 일부분을 정의하지만, 상태를 저장하지 않는 위젯입니다. 즉, 이 위젯은 변하지 않는 데이터에 기반하여 화면을 그립니다. 예를 들어, `Text`, `Icon`, `RaisedButton` 등과 같은 위젯이 이에 해당합니다. 상태 비저장 위젯은 간단한 UI 요소를 표현할 수 있도록 해주며, 다음은 상태 비저장 위젯의 예시 코드입니다:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

2.2 상태 저장 위젯 (Stateful Widget)

상태 저장 위젯은 사용자 인터페이스가 동적으로 변화할 수 있도록 해주는 위젯입니다. 이 위젯은 내부 상태를 유지하며, 상태의 변화에 따라 UI가 다시 그려질 수 있습니다. 예를 들어, 버튼 클릭 시 색상이 변하거나 텍스트가 바뀌는 경우, 상태 저장 위젯을 사용할 수 있습니다. 상태 저장 위젯의 예시 코드입니다:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('$_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

3. 위젯 트리

Flutter는 위젯을 트리 구조로 구성하여 UI를 생성합니다. 모든 위젯은 부모-자식 관계로 구성되며, 위젯이 중첩될 수 있습니다. 위젯 트리는 Flutter 애플리케이션의 UI가 어떻게 구성되는지를 직관적으로 보여줍니다. 부모 위젯은 자식 위젯을 포함하고, 이러한 관계를 통해 화면에 표시되는 모든 요소를 조합할 수 있습니다.

4. 위젯의 재사용성

Flutter 위젯의 가장 큰 장점 중 하나는 높은 재사용성입니다. 사용자가 자주 사용하는 UI 구성 요소를 별도로 위젯으로 만들어 둔다면, 다른 곳에서도 손쉽게 재사용할 수 있습니다. 예를 들어, 사용자 정보를 표시하는 카드 UI를 만든다면 이를 위젯으로 만들고, 여러 화면에서 재사용할 수 있습니다.

5. 커스텀 위젯 만들기

Flutter에서는 기본 제공 위젯 외에도 사용자가 직접 커스텀 위젯을 만들어낼 수 있습니다. 커스텀 위젯을 만드는 과정은 사용자 요구에 맞는 복잡한 UI를 구축하는 데 매우 유용합니다. 다음은 기본적인 커스텀 위젯을 만드는 예시입니다:

import 'package:flutter/material.dart';

class MyCustomWidget extends StatelessWidget {
  final String title;
  final Color color;

  MyCustomWidget({required this.title, this.color = Colors.blue});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: color,
      child: Text(
        title,
        style: TextStyle(fontSize: 20.0, color: Colors.white),
      ),
    );
  }
}

6. 위젯의 레이아웃

Flutter에서는 다양한 레이아웃 위젯을 제공하여 UI 요소들이 어떻게 배치될지를 정의합니다. 대표적으로 Column, Row, Stack, Container등이 있습니다. 각 위젯은 자식 위젯의 배치 방식을 달리 하여 복잡한 레이아웃을 쉽게 구성할 수 있도록 돕습니다.

6.1 Column과 Row

Column과 Row는 자식 위젯을 수직 또는 수평으로 배치할 수 있게 해줍니다. 예를 들어, 수직 스크롤이 필요한 리스트를 만들 때 Column을 사용할 수 있습니다. 여기에 몇 가지 자식 위젯을 추가하면 자동으로 위젯이 배치됩니다.

import 'package:flutter/material.dart';

class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('첫 번째 줄'),
        Text('두 번째 줄'),
        Text('세 번째 줄'),
      ],
    );
  }
}

6.2 Stack

Stack 위젯은 자식 위젯들을 겹쳐서 배치할 때 유용합니다. 각 자식 위젯은 원점 점좌표를 기준으로 배치되므로, 복잡한 레이아웃을 쉽게 구성할 수 있는 장점이 있습니다.

7. Flutter의 위젯 생명주기

Flutter의 위젯은 생명주기를 가지고 있어 생성, 업데이트, 파괴되는 과정을 관리합니다. 상태 저장 위젯은 createState(), initState(), didChangeDependencies(), build(), dispose()와 같은 메서드를 가지고 있습니다. 이 메서드들을 통해 위젯의 생명주기를 관리하며, 상태를 업데이트할 수 있습니다.

8. 결론

이번 글에서는 Flutter에서 위젯이란 무엇인지, 위젯의 종류와 사용법, 그리고 커스텀 위젯 만드는 방법에 대해 알아보았습니다. Flutter의 위젯 시스템은 개발자에게 강력한 도구를 제공하며, 이를 통해 우수한 사용자 인터페이스를 구성할 수 있습니다. 더 깊이 있는 내용을 지속적으로 학습하는 것이 Flutter 조작 능력을 키우는 데 큰 도움이 될 것입니다. 다음 강좌에서는 위젯에 대해 더 구체적으로 알아보도록 하겠습니다.