위젯(Widget) 개념

플러터(Flutter)에서 위젯(Widget)은 사용자 인터페이스(UI)의 구성요소를 나타내는 클래스입니다. 즉, 앱 화면에 보여지는 모든 것(텍스트, 이미지, 버튼, 폼 등)은 위젯으로 구성됩니다.

Flutter에서는 위젯을 구성하는 두 가지 타입이 있습니다.

StatelessWidget

변경되지 않는 위젯입니다.
한 번 생성되면 다시 그려지지 않습니다.
대표적인 예시로 Text, Icon, RaisedButton 등이 있습니다.

StatefulWidget

변경 가능한 위젯입니다.
상태를 가지고 있으며, 상태가 변경될 때마다 다시 그려집니다.
대표적인 예시로 CheckBox, TextField, ListView 등이 있습니다.
위젯은 서로 중첩해서 사용될 수 있으며, 하나의 위젯은 여러 개의 하위 위젯으로 구성될 수 있습니다. 이러한 위젯들은 모두 계층 구조(Hierarchy)를 이루며, 이를 위젯 트리(Widget Tree)라고 합니다.

Flutter에서 위젯은 다양한 속성(Property)과 이벤트(Event)를 가질 수 있습니다. 속성은 위젯이 어떤 모양과 동작을 갖게 할지 결정하고, 이벤트는 사용자가 상호작용할 때 발생하는 액션을 처리합니다.

Flutter에서는 위젯의 구성이나 속성값 등을 변경하면 화면에 바로 반영됩니다. 이러한 특성은 개발자가 빠르게 UI를 구성하고 변경 사항을 테스트할 수 있도록 도와줍니다.

StatelessWidget

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  final String text;

  const MyTextWidget({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

위 코드는 MyTextWidget이라는 StatelessWidget을 정의하고, Text 위젯을 리턴하는 build 메서드를 구현합니다. MyTextWidget은 생성자에서 text 매개변수를 받아오며, 이 값을 Text 위젯의 텍스트로 사용합니다.

StatefulWidget

import 'package:flutter/material.dart';

class MyCounterWidget extends StatefulWidget {
  const MyCounterWidget({Key? key}) : super(key: key);

  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Counter:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

위 코드는 MyCounterWidget이라는 StatefulWidget을 정의하고, _MyCounterWidgetState 클래스를 사용하여 상태를 관리합니다. build 메서드에서는 _counter 값을 출력하고, _incrementCounter 메서드에서는 _counter 값을 증가시키고 화면을 다시 그리기 위해 setState 메서드를 호출합니다. ElevatedButton 위젯은 _incrementCounter 메서드를 호출하는 이벤트 핸들러를 가지며, 버튼이 클릭될 때마다 _counter 값을 증가시킵니다.