[Flutter] Dialog 에서 setState() 사용하기

Flutter 대화상자에서 setState() 사용하기

Flutter 개발을 하다 보면, 사용자 인터랙션에 따라 UI를 업데이트해야 하는 경우가 많습니다.
이때 핵심적인 역할을 하는 것이 바로 setState() 메서드입니다.
특히 대화상자(Dialog) 내에서 setState()를 어떻게 활용하는지, 그리고 그 과정에서 발생할 수 있는 문제점과 해결책을 살펴보겠습니다.

1. setState()란 무엇인가?

setState()는 Flutter 위젯의 상태를 변경하고, 변경된 상태에 따라 UI를 다시 그리는(rebuild) 역할을 합니다. 즉, 위젯 내부의 데이터가 변경되었음을 Flutter 프레임워크에 알리는 역할을 수행합니다. setState()가 호출되면 Flutter는 해당 위젯과 하위 위젯들을 다시 빌드하여 UI를 업데이트합니다.

2. 대화상자(Dialog)와 setState()

Flutter에서 대화상자는 사용자에게 정보를 표시하거나, 사용자 입력을 받기 위해 사용됩니다. showDialog() 함수를 사용하여 대화상자를 표시하며, 대화상자 내에서 사용자의 상호작용(버튼 클릭, 텍스트 입력 등)에 따라 UI를 업데이트해야 할 경우가 발생합니다. 이때 setState()를 사용하여 대화상자 내부의 위젯 상태를 변경하고 UI를 갱신합니다.

2.1. 간단한 예제: 카운터 대화상자

다음은 대화상자 내에서 버튼 클릭 시 카운터를 증가시키는 간단한 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;
  void _showCounterDialog(BuildContext context) {
    int dialogCounter = 0; // 대화상자 내부 카운터
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Counter Dialog"),
          content: StatefulBuilder( // StatefulBuilder를 사용하여 대화상자 내부에서 setState 사용
            builder: (BuildContext context, StateSetter setState) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('Counter: $dialogCounter'),
                  ElevatedButton(
                    child: Text('Increment'),
                    onPressed: () {
                      setState(() {
                        dialogCounter++;
                      });
                    },
                  ),
                ],
              );
            },
          ),
          actions: [
            TextButton(
              child: Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Main Counter: $_counter',
            ),
            ElevatedButton(
              onPressed: () {
                _showCounterDialog(context);
              },
              child: Text('Show Counter Dialog'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위 코드에서 중요한 부분은 StatefulBuilder 위젯입니다. StatefulBuilder를 사용하면 대화상자 내부에서 setState()를 호출하여 UI를 업데이트할 수 있습니다. StatefulBuilder는 자체적인 State를 관리하며, setState() 호출 시 해당 부분만 다시 빌드합니다.

3. setState() 사용 시 주의사항

setState()를 사용할 때 몇 가지 주의해야 할 사항이 있습니다.

• 상태 관리의 범위: setState()는 해당 위젯의 상태만 변경합니다. 다른 위젯의 상태를 변경하려면, 상태를 공유하거나(예: Provider, Riverpod), 콜백 함수를 통해 부모 위젯에 상태 변경을 알리고 부모 위젯에서 setState()를 호출해야 합니다.
• 성능: 과도한 setState() 호출은 UI를 불필요하게 다시 그리게 하여 성능 저하를 유발할 수 있습니다. UI 업데이트가 필요한 부분에만 setState()를 사용하도록 주의해야 합니다.
• StatefulBuilder 사용: 대화상자 내부에서 setState()를 사용하려면 StatefulBuilder를 사용하는 것이 일반적입니다. StatefulBuilder는 대화상자 내에서 독립적인 상태를 관리할 수 있게 해줍니다.

팁: 복잡한 상태 관리가 필요한 경우, Provider, Riverpod, BLoC/Cubit과 같은 상태 관리 라이브러리를 사용하는 것을 고려해 보세요. 이러한 라이브러리는 상태 관리의 효율성을 높이고, 코드의 유지보수성을 향상시킵니다.

4. 결론

Flutter에서 setState()는 UI 업데이트의 핵심이며, 대화상자 내에서도 중요한 역할을 합니다. StatefulBuilder를 사용하여 대화상자 내부의 상태를 관리하고, UI를 효과적으로 업데이트할 수 있습니다. setState() 사용 시 주의사항을 염두에 두고, 효율적이고 유지보수 가능한 코드를 작성하는 것이 중요합니다.