Flutter에서의 상태관리 'setState' 사용법

Flutter에서 setState는 Stateful 위젯에서 상태를 변경하고 UI를 업데이트하는 데 사용되는 중요한 함수이다. Flutter에서 위젯의 상태가 변경될 때 UI를 업데이트하기 위해 이 함수를 사용한다. 오늘은 setState의 기본 개념과 사용 방법에 대해 학습하였다.

📖 setState 기본 개념

• Stateful 위젯이란?
  • Flutter에는 Stateless 위젯과 Stateful 위젯이 있다. Stateful 위젯은 변경 가능한 상태를 가지며, 이 상태에 따라 UI가 업데이트된다.
• 상태 관리의 중요성 setState 함수는 Stateful 위젯의 상태를 업데이트하고, 이를 통해 UI를 재구성한다.
  
  
  

📖 코드 예제

• 아래 예제코드의 CounterWidget은 StatefulWidget으로, 버튼을 누를 때마다 _counter 변수의 값을 증가시키고, 그 결과를 화면에 표시한다. setState 함수는 _counter의 값을 변경하고 UI를 업데이트하는 데 사용된다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// 간단한 카운터 앱의 루트 위젯
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterWidget(),
    );
  }
}

// 카운터 기능을 가진 StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

// CounterWidget의 상태를 관리하는 클래스
class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0; // 카운터 초기값 설정

  void _incrementCounter() {
    setState(() {
      _counter++; // 버튼 클릭 시 카운터 증가
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('카운터')),
      body: Center(child: Text('카운트: $_counter')), // 카운터 값 표시
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

📖 주의 사항

• setState는 Flutter에서 상태 관리의 기본이지만, 과도한 사용은 앱의 성능에 영향을 줄 수 있다고 하니 염두하자.