Flutter의 가장 기본적이고 중요한 개념, 위젯에 대해 알아보기

728x90

Flutter의 가장 핵심적인 개념 중 하나는 위젯(Widget)입니다.

Flutter에서 위젯이란 UI를 구성하는 기본 단위로, 앱의 모든 화면 요소가 위젯으로 정의됩니다.

이 글에서는 위젯이 무엇인지, 어떻게 작동하는지, 그리고 위젯을 사용하여 Flutter 앱을 효과적으로 개발할 수 있는 방법에 대해 자세히 알아보겠습니다.

1. 위젯(Widget)이란 무엇인가?

위젯은 Flutter에서 UI를 구성하는 최소 단위입니다. 화면에 보이는 모든 것이 위젯으로 표현되며, 버튼, 텍스트, 이미지, 레이아웃 등 앱을 구성하는 모든 요소는 위젯입니다. 심지어 레이아웃을 정의하는 Row와 Column 같은 구조적인 요소들도 위젯으로 취급됩니다.

쉽게 말해, Flutter 앱은 다양한 위젯들이 결합되어 하나의 화면을 구성하는 방식으로 작동합니다. 이 위젯들은 각자의 역할을 하며, 필요한 경우 다른 위젯을 포함하거나 결합하여 더 복잡한 UI 요소를 만들 수 있습니다. 위젯은 트리 구조로 구성되며, 부모-자식 관계를 통해 상위 위젯이 하위 위젯들을 감싸는 방식으로 배치됩니다.

2. StatelessWidget과 StatefulWidget의 차이점

Flutter에서 위젯은 크게 두 가지 종류로 나눌 수 있습니다: StatelessWidget과 StatefulWidget입니다. 이 둘의 차이는 위젯이 변경 가능한 상태를 가질 수 있는지 여부에 따라 구분됩니다.

StatelessWidget: 상태가 없는 위젯입니다. 즉, 한 번 생성되면 더 이상 변하지 않는 고정된 UI를 제공합니다. 예를 들어, 단순한 텍스트나 이미지와 같은 정적인 요소는 StatelessWidget을 사용하여 구현됩니다. StatelessWidget은 기본적으로 build() 메서드를 통해 UI를 생성하며, 상태 변화가 필요하지 않은 경우에 사용됩니다.

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('안녕하세요, Flutter!');
  }
}

StatefulWidget: 상태를 가질 수 있는 위젯입니다. 즉, 사용자 상호작용이나 데이터 변화에 따라 UI가 동적으로 변경될 수 있는 경우에 사용됩니다. StatefulWidget은 자체적으로 상태(State)를 관리하며, 상태가 변경될 때마다 setState() 메서드를 호출하여 UI를 다시 렌더링합니다. 예를 들어, 버튼 클릭 시 텍스트가 변경되는 경우 StatefulWidget을 사용합니다.

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String text = '안녕하세요, Flutter!';

  void _changeText() {
    setState(() {
      text = 'Flutter가 재미있어요!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(text),
        ElevatedButton(
          onPressed: _changeText,
          child: Text('텍스트 변경'),
        ),
      ],
    );
  }
}

위 예시에서 StatefulWidget은 버튼 클릭 시 텍스트가 변경되는 동적인 UI를 구현하고 있습니다. 이는 상태 변화에 따라 UI가 변경되어야 할 때 StatefulWidget이 필요한 이유를 보여줍니다.

3. 위젯 트리(Widget Tree)와 UI 구성

Flutter 앱은 위젯 트리(Widget Tree)라는 개념을 통해 UI를 구성합니다. 위젯 트리는 부모 위젯과 자식 위젯들이 계층적으로 연결된 구조를 말합니다. 부모 위젯은 자식 위젯을 포함하며, 이 과정이 계속해서 반복되어 전체 앱 화면을 구성합니다.

예를 들어, 다음과 같은 간단한 위젯 트리를 생각해 볼 수 있습니다:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter 위젯'),
    ),
    body: Center(
      child: Column(
        children: [
          Text('첫 번째 텍스트'),
          Text('두 번째 텍스트'),
        ],
      ),
    ),
  );
}

여기서 Scaffold는 앱 화면의 기본 구조를 제공하는 부모 위젯이고, 그 안에 AppBar와 Center, Column 등의 자식 위젯이 있습니다. Column은 다시 두 개의 Text 위젯을 자식으로 포함하여 화면에 두 줄의 텍스트를 표시합니다. 이처럼 위젯 트리는 앱 화면을 구성하는 논리적인 구조입니다.

4. Flutter에서 위젯 사용의 장점

Flutter에서 위젯을 사용하면 다음과 같은 장점이 있습니다:

재사용성: 위젯은 쉽게 재사용이 가능합니다. 동일한 UI 요소가 여러 곳에서 사용될 때, 해당 위젯을 한 번만 정의하고 이를 여러 화면에서 재사용할 수 있어 코드의 중복을 줄일 수 있습니다.
유연성: 위젯은 부모-자식 관계를 기반으로 유연하게 레이아웃을 설계할 수 있습니다. 다양한 UI 요소를 자유롭게 조합하여 복잡한 화면을 만들 수 있으며, 필요한 기능을 쉽게 확장할 수 있습니다.
플랫폼 독립성: Flutter 위젯은 각 플랫폼(Android, iOS)에서 동일하게 동작하므로, 플랫폼에 따라 UI를 따로 구현할 필요가 없습니다. 이는 크로스 플랫폼 앱 개발에서 매우 중요한 장점입니다.

5. 위젯의 구성 요소와 Flutter의 디자인 철학

Flutter는 **"Everything is a Widget"**이라는 철학을 기반으로 설계되었습니다. 이 말은 앱의 모든 요소가 위젯으로 이루어져 있음을 뜻합니다. 예를 들어, 단순한 텍스트부터 버튼, 이미지, 애니메이션까지 모두 위젯으로 구성되며, 심지어 레이아웃을 관리하는 Row, Column, Container 등도 위젯입니다.

위젯은 Immutable(불변) 속성을 가지며, 자체적으로 상태를 유지하지 않습니다. 만약 상태가 필요하다면 StatefulWidget을 사용하여 별도의 상태(State) 객체에서 상태를 관리하게 됩니다. 이 방식은 상태와 UI를 명확히 분리하여 유지 보수성을 높이고, 버그를 줄일 수 있는 이점이 있습니다.

6. 결론

Flutter에서 위젯은 앱의 모든 UI를 구성하는 기본 단위로, 앱의 구조와 디자인을 매우 유연하게 설계할 수 있게 해줍니다. Flutter의 위젯 시스템은 재사용성과 확장성이 뛰어나며, 플랫폼 독립적인 코드를 통해 크로스 플랫폼 앱 개발을 쉽게 만들어줍니다. StatelessWidget과 StatefulWidget의 차이를 이해하고 위젯 트리를 활용하면, 보다 효율적이고 직관적인 Flutter 앱을 개발할 수 있습니다.

위젯에 대한 개념을 확실히 이해하는 것이 Flutter 앱 개발의 첫걸음입니다. Flutter의 위젯 시스템을 활용하여 복잡한 UI도 간단하고 빠르게 구축할 수 있으니, 위젯의 동작 방식을 충분히 익혀보세요!