[Android(Flutter)] Dart의 상태 관리 기술

Flutter에서 상태 관리는 UI와 데이터의 일관성을 유지하는 데 중요한 요소입니다.

기본적인 상태 관리는 "StatefulWidget"과 "setState() 메서드"를 통해 쉽게 구현할 수 있으며,

앱의 크기가 커지면 "Provider", "Riverpod"와 같은 더 구조적인 상태 관리 도구를 사용할 수 있습니다.

 

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

Flutter 애플리케이션에서 상태(state)는 UI에 영향을 주는 모든 데이터를 의미합니다.

사용자가 버튼을 누르거나, 텍스트 필드를 입력할 때, 이 변화하는 데이터가 UI에 반영되어야 하는데,

이때 상태 관리가 필요합니다.

 

2. StatefulWidget과 상태 관리

Flutter에서 "StatefulWidget"은 상태가 변할 수 있는 위젯입니다.

상태가 변경되면 "setState() 메서드"를 호출하여 UI를 업데이트할 수 있습니다.

 

//Flutter의 기본 UI 구성 요소들을 불러옴 MaterialApp, Scaffold, AppBar, Text, Icon 등
import 'package:flutter/material.dart';

void main() {
  //Flutter 프레임워크에게 "이 앱의 루트 위젯이 무엇인지" 알려주는 띄우는 함수
  runApp(MyApp());
}

//StatelessWidget:상태가 없는 위젯(한 번 그려지면 내부 데이터가 변하지 않음)
class MyApp extends StatelessWidget {
  @override //메서드를 재정의
  Widget build(BuildContext context) {
    //MaterialApp:앱 전체의 기본 구조와 테마 담당
    return MaterialApp(
      home: CounterScreen(), //앱 실행 시 가장 먼저 보여줄 화면
    );
  }
}

//StatefulWidget:상태가 바뀌면 화면을 다시 그릴 수 있는 위젯
class CounterScreen extends StatefulWidget {
  @override
  //상태값을 보관하고 관리할 클래스(_CounterScreenState)를 만듦
  _CounterScreenState createState() => _CounterScreenState();
}

//상태 클래스 정의
class _CounterScreenState extends State<CounterScreen> {
  //밑줄(_)은 "private(비공개)" 변수라는 의미 다른 클래스 파일에서 상용 불가
  int _counter = 0; //상태 변수

  //카운터를 증가시키는 메서드
  void _incrementCounter() {
    //setState()가 호출되면 build() 함수가 다시 실행되어 화면이 새로 그림
    setState(() {
      _counter++; //_counter 값을 1 증가
    });
  }

  //build():위젯이 화면에 그려질 때 호출되는 함수
  //여기서 리턴하는 위젯 트리가 실제 화면에 표시됨
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Scaffold:화면의 기본 틀(앱바, 본문, 플로팅 버튼 등)을 제공하는 위젯
      appBar: AppBar(
        title: Text('Counter App'), //앱 상단 바에 표시되는 제목
      ),

      //body:화면의 주요 내용 부분
      body: Center(
        //Center:자식 위젯을 화면 가운데에 정렬
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, //세로 방향 가운데 정렬
          children: <Widget>[
            //Text:문자열(텍스트)을 표시하는 위젯
            Text(
              'push :', //안내 텍스트
            ),

            //_counter 값 표시(변할 때마다 UI 자동 업데이트)
            Text(
              '$_counter', //'$'는 문자열 안에서 변수 값을 표시하는 Dart 문법
              style: Theme.of(context).textTheme.headline4, //큰 글씨체 스타일 적용
            ),
          ],
        ),
      ),

      //이벤트 버튼
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, //버튼 누르면 _incrementCounter() 실행
        tooltip: 'Increment', //길게 누를 때 표시되는 힌트 텍스트
        child: Icon(Icons.add), //'+' 아이콘 표시
      ),
    );
  }
}

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