Flutter의 createState 함수란?

Flutter에서 createState 함수는 StatefulWidget과 함께 사용되며, 화면의 변경 가능한 상태(state)를 관리하는 중요한 역할을 합니다. 쉽게 말해, StatefulWidget을 위한 "상태 관리자"를 만들어주는 함수입니다.

왜 createState가 필요한가?

StatefulWidget은 두 가지 주요 구성 요소로 이루어져 있습니다:

1. StatefulWidget: 화면에 정적인 부분을 정의합니다.
2. 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 함수의 동작 과정

1. State 객체 생성:
   • createState 함수는 State 객체를 생성하고 StatefulWidget과 연결합니다.
2. State 객체 관리:
   • Flutter는 State 객체를 사용해 StatefulWidget의 상태를 관리합니다.
3. 상태 변경:
   • 상태가 변경되면 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 클래스는 아래와 같은 순서로 작동합니다:

1. createState: State 객체 생성.
2. initState: State 객체 초기화.
3. build: UI 렌더링.
4. setState: 상태 변경 후 UI 업데이트.