[플러터] StatefulWidget

소요 시간: 2분 조회수: 132

Flutter는 강력한 UI 프레임워크로, 다양한 유형의 위젯을 제공합니다. 그 중에서도 StatefulWidget은 상태를 가질 수 있는 위젯으로, 동적인 UI를 구현할 때 매우 유용합니다. 이 글에서는 StatefulWidget의 개념과 기본 구조, 그리고 실제 구현 방법에 대해 자세히 알아보겠습니다.


StatefulWidget이란?

StatefulWidget은 상태를 가질 수 있는 위젯입니다. 여기서 상태란 위젯이 보여주는 데이터나 속성의 변경 가능한 값을 의미합니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 카운터가 증가하는 앱을 생각해봅시다. 이 경우 카운터 값은 변경 가능한 상태이며, 이를 관리하기 위해 StatefulWidget을 사용합니다.

StatefulWidget은 StatelessWidget과 달리 위젯이 생성된 후에도 상태를 변경할 수 있습니다. 이는 사용자와의 상호작용이나 비동기 작업의 결과에 따라 UI를 동적으로 업데이트할 수 있게 해줍니다.


StatefulWidget의 기본 구조

StatefulWidget은 두 개의 클래스가 필요합니다. 첫 번째 클래스는 StatefulWidget 자체를 정의하고, 두 번째 클래스는 위젯의 상태를 관리하는 State 클래스를 정의합니다. 아래는 StatefulWidget의 기본 구조를 나타내는 코드입니다.

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

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

위 코드는 MyApp이라는 StatefulWidget을 정의하고 있습니다. MyApp 클래스는 StatefulWidget을 확장하며, createState 메서드를 오버라이드하여 _MyAppState 클래스를 반환합니다. createState 메서드는 StatefulWidget의 상태를 생성하는 역할을 합니다.

_MyAppState 클래스는 State<MyApp>을 확장하며, 실제 상태와 UI를 관리합니다. 이 클래스 내부에는 build 메서드가 있으며, 이 메서드는 위젯 트리를 구성하고 반환하는 역할을 합니다. 현재는 Container 위젯을 반환하고 있습니다.


StatefulWidget의 활용

StatefulWidget을 사용하여 동적인 UI를 구현하는 방법을 살펴보겠습니다. 아래 예제는 간단한 카운터 앱으로, 버튼을 클릭할 때마다 카운터 값이 증가합니다.

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

이 예제는 사용자가 버튼을 클릭할 때마다 카운터 값이 증가하고, UI가 업데이트되는 동적인 동작을 보여줍니다.


결론

StatefulWidget은 Flutter에서 상태를 관리하고 동적인 UI를 구현하는 데 필수적인 구성 요소입니다. 이번 글에서는 StatefulWidget의 기본 개념과 구조, 그리고 실제 예제를 통해 그 활용 방법을 살펴보았습니다. StatefulWidget을 적절히 사용하면 Flutter 앱에서 더욱 풍부하고 상호작용적인 사용자 경험을 제공할 수 있습니다.

인기글

플러터 리스트