반응형
Flutter의 createState 함수란?
Flutter에서 createState 함수는 StatefulWidget과 함께 사용되며, 화면의 변경 가능한 상태(state)를 관리하는 중요한 역할을 합니다. 쉽게 말해, StatefulWidget을 위한 "상태 관리자"를 만들어주는 함수입니다.
왜 createState가 필요한가?
StatefulWidget은 두 가지 주요 구성 요소로 이루어져 있습니다:
- StatefulWidget: 화면에 정적인 부분을 정의합니다.
- State: 화면의 변경 가능한 부분(예: 버튼 클릭, 입력 값)을 관리합니다.
createState 함수는 StatefulWidget이 화면의 상태를 관리할 수 있도록 State 객체를 연결합니다.
createState 함수의 기본 구조
createState 함수는 StatefulWidget 클래스에서 필수로 구현해야 하며, State 클래스를 반환합니다.
@override
State<MyWidget> createState() => _MyWidgetState();
- MyWidget: StatefulWidget 클래스 이름입니다.
- _MyWidgetState: State 클래스 이름입니다. 일반적으로 밑줄(_)을 붙여 해당 클래스를 비공개로 만듭니다.
간단한 예제: 버튼을 누르면 숫자가 증가하는 앱
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int counter = 0;
void _incrementCounter() {
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('createState 함수 예제'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'버튼을 누른 횟수:',
style: TextStyle(fontSize: 20),
),
Text(
'$counter',
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('숫자 증가'),
),
],
),
),
),
);
}
}
createState 함수의 동작 과정
- State 객체 생성:
- createState 함수는 State 객체를 생성하고 StatefulWidget과 연결합니다.
- State 객체 관리:
- Flutter는 State 객체를 사용해 StatefulWidget의 상태를 관리합니다.
- 상태 변경:
- 상태가 변경되면 setState 메서드를 호출하여 build 함수를 다시 실행하고 UI를 업데이트합니다.
StatefulWidget에서 createState와 State의 관계
StatefulWidget은 변경 가능한 UI를 처리할 때 항상 State 객체와 함께 작동합니다. 아래 그림으로 쉽게 이해할 수 있습니다:
StatefulWidget -------> createState() -------> State 클래스
↑ ↓
UI 정의 상태 변경 및 UI 업데이트1. createState 함수는 언제 호출되나요?
- StatefulWidget이 처음 생성될 때 딱 한 번 호출됩니다.
2. 왜 State 객체를 분리하나요?
- State 객체를 분리하면 동일한 StatefulWidget을 다른 상태에서 재사용할 수 있어 UI와 상태를 독립적으로 관리할 수 있습니다.
3. State 클래스의 생명주기는 어떻게 되나요?
State 클래스는 아래와 같은 순서로 작동합니다:
- createState: State 객체 생성.
- initState: State 객체 초기화.
- build: UI 렌더링.
- setState: 상태 변경 후 UI 업데이트.
반응형
'Flutter' 카테고리의 다른 글
| 다트 이해하기 - (9) Flutter의 didChangeDependencies 함수 (0) | 2024.12.01 |
|---|---|
| 다트 이해하기 - (8) Flutter의 initState 함수 (0) | 2024.12.01 |
| 다트 이해하기 - (6) Flutter의 build 함수 (0) | 2024.12.01 |
| 다트 이해하기 - (5) Flutter의 createElement 함수 (0) | 2024.12.01 |
| 다트 이해하기 - (4) Constructor(생성자) (0) | 2024.12.01 |
