Flutter

[Flutter] StatefulWidget: 동적인 상태 관리를 위한 핵심 요소

dev.trams 2023. 7. 1. 10:56
반응형


Flutter에서 상태 관리는 앱의 동작을 제어하고 UI를 업데이트하는 중요한 요소입니다. StatefulWidget은 Flutter에서 동적인 상태를 관리하기 위한 핵심적인 위젯입니다. 이번 포스트에서는 StatefulWidget의 개념과 활용 방법에 대해 알아보겠습니다.

1. StatefulWidget 개념:
   • StatefulWidget은 변경 가능한 상태를 가지는 위젯입니다. 상태는 위젯의 생명주기 동안 변할 수 있으며, 변화에 따라 UI가 업데이트됩니다.
   • StatefulWidget은 State 객체와 함께 작동합니다. State 객체는 위젯의 상태를 보관하고, 상태 변경 시 UI를 업데이트합니다.
   • StatefulWidget은 UI를 다시 빌드할 때마다 build() 메서드를 호출하여 새로운 UI를 생성합니다.

2. StatefulWidget 사용법:
   • StatefulWidget을 사용하기 위해 두 가지 클래스가 필요합니다: StatefulWidget 클래스와 State 클래스입니다.
   • StatefulWidget 클래스는 상태를 보관하고 상태 변경 시 UI를 업데이트하는 build() 메서드를 구현합니다.
   • State 클래스는 StatefulWidget과 연결되어 상태를 관리합니다. createState() 메서드를 구현하여 State 객체를 생성합니다.
   • StatefulWidget을 사용할 때는 상태를 변경할 수 있는 메서드를 정의하고, setState()를 호출하여 UI 업데이트를 요청합니다.

3. StatefulWidget의 장점:
   • 동적인 상태 관리를 위해 필요한 기능을 제공합니다. 예를 들어, 사용자 입력에 따라 UI를 업데이트하거나, 네트워크 요청 결과에 따라 데이터를 변경하는 등의 작업을 수행할 수 있습니다.
   • 위젯의 부분적인 업데이트가 가능하므로 성능을 향상시킬 수 있습니다. 변화가 있는 부분만 다시 그려지므로 전체 UI를 새로 그리는 것보다 효율적입니다.

Flutter에서 StatefulWidget은 앱의 상태 관리와 동적인 UI 업데이트에 핵심적인 역할을 합니다. 상태 변화에 따라 UI를 업데이트하고, 사용자와 상호작용하며 동적인 동작을 수행할 수 있습니다. StatefulWidget을 적절히 활용하면 좀더 복잡한 앱을 구현하고 다양한 기능을 제공할 수 있습니다.


이제 StatefulWidget에 대한 기본 개념과 활용 방법에 대해 알아보았습니다. 

반응형


StatefulWidget를 활용한 예제인 카운터앱을 만들어보고 StatefulWidget에 대해 이해해 봅시다.
사용자가 버튼을 누를 때마다 카운터가 증가하며, UI가 업데이트되는 기능을 구현할 것입니다. 아래에 예제 코드와 코드에 대한 설명입니다.

카운터 앱 예제 실행화면

import 'package:flutter/material.dart';

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

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '카운터 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0; // 카운터 변수

  void _incrementCounter() {
    // 카운터 증가 함수
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('카운터 앱'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '카운터',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 버튼을 누를 때마다 카운터 증가 함수 호출
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예제 코드는 StatefulWidget을 활용한 간단한 카운터 앱을 구현한 것입니다. 앱의 구조는 CounterApp과 CounterScreen 두 개의 위젯으로 구성되어 있습니다.

CounterApp은 MaterialApp을 포함하며, 앱의 기본 테마 설정과 카운터 화면(CounterScreen)을 홈으로 지정합니다.

CounterScreen은 StatefulWidget을 상속하여 상태를 관리합니다. _counter라는 변수를 사용하여 카운트 값을 저장하고, _incrementCounter() 함수를 통해 카운터를 증가시킵니다.

CounterScreen의 build() 메서드에서는 Scaffold를 사용하여 앱의 구조를 정의합니다. AppBar를 상단에 추가하고, 카운터 값을 표시하기 위해 Column과 Text 위젯을 사용합니다. 카운터 증가 버튼은 FloatingActionButton으로 구현되어 있으며, onPressed 콜백에 _incrementCounter() 함수를 할당하여 버튼을 누를 때마다 카운터가 증가하도록 합니다.

이제 위 예제 코드를 실행하면 "카운터 앱"이라는 제목을 가진 AppBar와 0으로 초기화된 카운터가 표시되는 화면이 나타납니다. 사용자가 '+' 버튼을 누를 때마다 카운터가 증가하며, 해당 값이 UI에 업데이트됩니다.

Flutter의 StatefulWidget을 활용하면 동적인 상태를 관리하고, UI를 업데이트할 수 있는 강력한 도구를 제공받습니다. 위 예제를 참고하여 StatefulWidget을 활용해서 앱을 개발해보세요!

반응형