[Android(Flutter)]상태 관리

Flutter에서 상태 관리는 UI와 데이터의 일관성을 유지하는 데 중요한 요소입니다. 기본적인 상태 관리는 StatefulWidget과 setState() 메서드를 통해 쉽게 구현할 수 있으며, 앱의 크기가 커지면 Provider, Riverpod와 같은 더 구조적인 상태 관리 도구를 사용할 수 있습니다.

 

1. 상태 관리란 무엇인가?

Flutter 애플리케이션에서 상태(state)는 UI에 영향을 주는 모든 데이터를 의미합니다. 사용자가 버튼을 누르거나, 텍스트 필드를 입력할 때, 이 변화하는 데이터가 UI에 반영되어야 하는데, 이때 상태 관리가 필요합니다.

기본적인 상태 관리는 UI가 변화하는 데이터를 어떻게 처리하고 화면에 반영하는지를 정의하는 것이며, 이를 잘 처리해야 원활한 사용자 경험을 제공할 수 있습니다.

2. StatefulWidget과 상태 관리

Flutter에서 StatefulWidget은 상태가 변할 수 있는 위젯입니다. 상태가 변경되면 setState() 메서드를 호출하여 UI를 업데이트할 수 있습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      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('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'push :',
            ),
            Text(
              '$_counter', // 상태에 따라 UI가 변경됨
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 버튼을 누를 때 상태 변경
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

 

• CounterScreen : StatefulWidget을 사용하여 상태를 관리하는 화면입니다.
• _CounterScreenState : 위젯의 상태를 정의하는 클래스입니다. _counter라는 상태 변수를 가지고 있으며, 이를 통해 화면에 표시되는 카운트 값을 관리합니다.
• setState() : 버튼을 누를 때마다 _incrementCounter() 메서드가 호출되며, setState()를 사용하여 상태를 변경하고, 그에 따라 UI가 업데이트됩니다.
• UI 업데이트 : _counter 값이 변할 때마다 화면의 텍스트가 새로운 값으로 갱신됩니다.