6강: Flutter 상태 관리 – 위젯의 상태 이해하기
Flutter에서 앱을 만들다 보면, 사용자의 상호작용에 따라 UI가 변하는 상황을 자주 만나게 돼. 예를 들어, 사용자가 버튼을 누르거나 데이터를 입력했을 때 화면이 변하는 것을 원할 때가 있지. 이런 변화를 처리하는 것이 상태 관리(state management)야. 이번 강의에서는 Flutter에서 상태를 관리하는 방법과 Stateful 위젯과 Stateless 위젯의 차이를 깊이 알아볼 거야.
상태(state)란 무엇인가?
Flutter에서 상태(state)는 위젯의 UI에 영향을 미치는 데이터야. 이 데이터는 시간이 지남에 따라 변화할 수 있어. 예를 들어, 카운터를 세는 앱에서 숫자는 상태로 간주돼. 사용자가 버튼을 클릭할 때마다 숫자가 증가하거나 감소하면서 화면이 변경되잖아? 이 과정이 바로 상태의 변화야.
Flutter의 위젯은 크게 두 가지로 나뉘어:
- Stateless 위젯: 상태가 변하지 않는 위젯이야. 데이터를 변경할 필요가 없는 고정된 UI 요소를 표현할 때 사용해. 예를 들어, 단순한 텍스트나 아이콘 같은 경우에 사용되지.
- Stateful 위젯: 상태가 변할 수 있는 위젯이야. 사용자와의 상호작용에 따라 화면이 변경되는 경우에 사용해. 예를 들어, 버튼 클릭 후 내용이 바뀌거나 입력된 텍스트에 따라 화면이 업데이트되는 경우에 사용돼.
Stateful vs Stateless 위젯
이제 Stateful과 Stateless 위젯의 차이를 조금 더 구체적으로 알아보자.
1) Stateless 위젯
- 변화 없는 UI: Stateless 위젯은 상태가 변하지 않기 때문에, 한 번 생성되면 그 이후에는 변하지 않아.
- 예제: 다음은
StatelessWidget을 사용한 간단한 텍스트 위젯이야.
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('I am Stateless');
}
}이 위젯은 생성된 이후에는 변경되지 않고, 단순히 ‘I am Stateless’라는 텍스트만 표시해.
2) Stateful 위젯
- 상태 변화 가능: Stateful 위젯은 상태가 변할 수 있어. 따라서, 상태가 변할 때마다 UI가 갱신돼.
- 예제: 카운터를 세는 앱에서
StatefulWidget을 사용한 예제를 살펴보자.
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pressed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}여기서 setState() 함수는 상태가 변경되었음을 Flutter에 알려주는 역할을 해. 이 함수가 호출되면, Flutter는 build() 함수를 다시 호출해서 UI를 업데이트해.
상태 관리의 중요성
상태 관리는 Flutter 애플리케이션을 개발할 때 매우 중요한 부분이야. 특히 사용자와의 상호작용이 빈번한 앱에서는 상태 관리가 핵심 역할을 해. 앱의 규모가 커질수록 상태 관리의 중요성은 더 커져. 적절한 상태 관리 방법을 선택하지 않으면 코드가 복잡해지고 유지보수가 어려워지기 때문이야.
Flutter에는 간단한 앱을 위한 setState()와 같은 기본적인 상태 관리 방법 외에도, 더 큰 규모의 앱을 위한 Provider, Bloc 패턴, 그리고 Riverpod 같은 다양한 상태 관리 솔루션들이 있어. 이 강의에서는 기본적인 Stateful 위젯의 상태 관리 방법을 익히고, 이후 더 복잡한 상태 관리 기법들은 다음 강의에서 다룰 예정이야.
상태 변화와 UI 업데이트 실습
Stateful 위젯을 사용해 상태를 관리하는 간단한 실습을 해보자. 이번 실습에서는 버튼을 클릭할 때마다 숫자가 증가하는 카운터 앱을 만들어 볼 거야.
- 프로젝트 생성: 새로운 Flutter 프로젝트를 생성하고,
lib/main.dart파일을 열어. - Stateful 위젯 작성:
StatefulWidget을 사용하여 카운터 기능을 추가해.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('State Management Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pressed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}이제 앱을 실행해보면, 버튼을 누를 때마다 숫자가 증가하는 것을 볼 수 있어. 이처럼 상태가 변할 때마다 UI가 자동으로 업데이트되는 것이 Flutter의 Stateful 위젯의 강력한 기능이야.
마무리
이번 강의에서는 Flutter의 상태 관리와 Stateful 위젯을 사용해 상태를 업데이트하는 방법을 알아봤어. 상태를 관리하는 것은 Flutter 개발에서 가장 중요한 부분 중 하나야. 다음 강의에서는 이러한 상태 관리 기법을 활용해 더욱 복잡한 앱을 만들고, 다른 상태 관리 도구들에 대해 배워볼 거야. 함께 계속해서 발전해 나가자!