[Flutter] StatefulWidget:: 화면, 데이터, 로직을 한 번에

Flutter 개발을 시작하면서 가장 먼저 만나게 되는 것 중 하나가 바로 StatefulWidget입니다. 간단한 카운터 앱을 만들면서 "왜 이렇게 복잡하게 두 개의 클래스로 나뉘어져 있을까?" 궁금해하신 적 있으신가요? 

StatefulWidget이란 무엇인가?

StatefulWidget은 변경 가능한 상태를 가지는 위젯입니다. 하지만 여기서 중요한 포인트가 있습니다.

// StatefulWidget 클래스 자체는 불변(immutable)!
class StateCounterHomePage extends StatefulWidget {
  const StateCounterHomePage({super.key});

  @override
  State<StateCounterHomePage> createState() => _StateCounterHomePageState();
}

// 실제 상태는 State 클래스가 관리
class _StateCounterHomePageState extends State<StateCounterHomePage> {
  int count = 0; // 이것이 진짜 상태!
  
  @override
  Widget build(BuildContext context) {
    // UI 구성
  }
}

StatefulWidget = 위젯 팩토리 State = 실제 상태 + UI + 로직

실제 코드로 분석해보기

카운터 앱을 통해 StatefulWidget의 구조를 자세히 살펴보겠습니다.

class _StateCounterHomePageState extends State<StateCounterHomePage> {
  // 데이터 (상태)
  int count = 0;

  @override
  Widget build(BuildContext context) {
    // 화면 (UI)
    return Scaffold(
      appBar: AppBar(title: Text('State Counter App')),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            spacing: 10,
            children: [
              Text(
                'Counter.count : ${count}',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              ),
              ElevatedButton(
                // 로직 (이벤트 처리)
                onPressed: () {
                  setState(() {
                    count = count + 1;
                  });
                },
                child: Text('카운트 증가'),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    count = count - 1;
                  });
                },
                child: Text('카운트 감소'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

StatefulWidget은 세 가지 책임이 한 곳에 있습니다

1. 데이터: int count = 0 - 위젯의 상태
2. 화면: build() 메서드 - UI 구성
3. 로직: onPressed 콜백 - 이벤트 처리 및 상태 변경