📱 StatelessWidget vs StatefulWidget – Flutter 위젯의 기초

 

Flutter를 시작하면서 가장 먼저 마주치는 개념 중 하나가 바로 StatelessWidget과 StatefulWidget입니다. 처음엔 이름만 봐도 헷갈리죠. "상태가 있는 위젯? 없는 위젯? 그 상태가 도대체 뭔데?"

오늘은 이 두 가지 위젯의 차이를 명확하게 이해하고, 언제 어떤 위젯을 써야 하는지 감 잡을 수 있도록 간단한 예제와 함께 정리해보겠습니다.

---

StatelessWidget – 상태가 변하지 않는 위젯

StatelessWidget은 상태가 한 번 생성되면 바뀌지 않는 위젯입니다. 예를 들어, 단순한 텍스트나 아이콘 같은 요소를 보여주는 용도로 적합하죠.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stateless 예제',
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget')),
        body: Center(
          child: Text('나는 절대 안 변해요'),
        ),
      ),
    );
  }
}

위 코드에서 MyApp은 StatelessWidget입니다. 텍스트는 앱 실행 후 절대 바뀌지 않죠. 사용자의 입력이나 내부 상태 변화 같은 걸 반영하지 않습니다.

---

StatefulWidget – 상태가 바뀔 수 있는 위젯

StatefulWidget은 내부 상태에 따라 UI가 바뀌는 위젯입니다. 예를 들어 버튼을 눌렀을 때 숫자가 증가하는 카운터 같은 게 대표적인 예시죠.

import 'package:flutter/material.dart';

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

class MyStatefulApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stateful 예제',
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++; // 상태 변화 → UI 재빌드
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatefulWidget')),
      body: Center(
        child: Text('현재 값: $_count'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

여기서 핵심은 setState()입니다. 상태를 변경하고 나면 Flutter가 build()를 다시 호출해서 화면을 갱신합니다. 이게 바로 StatefulWidget의 핵심 메커니즘이죠.

---

언제 Stateless, 언제 Stateful?

상황 적절한 위젯

단순한 정적 UI	StatelessWidget
사용자 입력, 애니메이션, 네트워크 응답 등으로 UI가 변해야 할 때	StatefulWidget

팁 하나 드리자면, 처음에는 무조건 Stateless로 시작하세요.
상태가 필요해지는 시점에 Stateful로 전환해도 늦지 않습니다.

---

다음 포스팅 예고

위젯의 상태를 다뤘으니, 다음 포스팅에서는 Flutter 위젯의 생명주기 (Widget Lifecycle) 에 대해 다뤄보겠습니다.
initState, dispose, didChangeDependencies 같은 메서드들… 이름만 봐도 벌써 머리 아프다구요? 걱정 마세요. 딱 필요한 만큼만 깔끔하게 정리해드릴게요.