[Flutter] StatelessWidget vs StatefulWidget

Flutter에서는 앱 화면을 구성하는 모든 것이 Widget입니다.

이 위젯들은 크게 두 가지로 나눌 수 있습니다
StatelessWidget과 StatefulWidget
둘의 차이를 이해하면 더 나은 앱 개발이 가능해지니, 지금부터 예시와 함께 자세히 알아볼까요?

1️⃣ StatelessWidget

StatelessWidget은 말 그대로 "상태가 없는 위젯" 입니다.

즉, 화면의 내용이 고정되어 있으며, 유저의 행동이나 데이터 변화에 따라 다시 그려질 필요가 없습니다.

💭 "Hello, Flutter!" 라는 텍스트를 화면에 표시한다고 가정해보세요.

이 텍스트는 사용자와의 상호작용과 상관없이 변하지 않는 고정된 내용입니다.

import 'package:flutter/material.dart';

class StatelesswidgetApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget 정적')),
        body: Center(
          child: Text('Hello, Flutter!'), // 변하지 않는 텍스트
        ),
      ),
    );
  }
}

📱 실행 결과

화면에 "Hello, Flutter!" 라는 텍스트가 표시됩니다.
유저가 버튼을 누르거나 화면을 스와이프해도 이 텍스트는 변하지 않습니다.

이처럼 StatelessWidget은 고정된 UI를 표현할 때 사용됩니다.

2️⃣ StatefulWidget

이제 StatefulWidget을 살펴봅시다.
StatefulWidget 은 "상태가 있는 위젯" 으로,
사용자 상호작용이나 데이터 변화에 따라 화면의 내용이 동적으로 변경됩니다.

💭 버튼을 누를 때마다 숫자가 증가하는 카운터 앱을 만들어봅시다.

import 'package:flutter/material.dart';

class StatefulwidgetApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<StatefulwidgetApp> {
  int _counter = 0; // 상태를 저장하는 변수

  void _incrementCounter() {
    setState(() {
      // 상태를 업데이트하고 화면 새로고침
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidget 동적')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('버튼를 눌러보세욤'),
              Text(
                '$_counter', // 상태에 따라 동적으로 변경되는 텍스트
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter, // 버튼 클릭 시 상태 업데이트
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

📱 실행 결과

처음에는 화면 중앙에 0이라는 숫자가 표시됩니다.
유저가 화면 하단의 + 버튼을 누를 때마다 숫자가 1씩 증가합니다.
이처럼 StatefulWidget은 동적인 데이터와 UI를 처리할 때 사용됩니다.

3️⃣ StatelessWidget vs StatefulWidget

특징	StatelessWidget	StatefulWidget
상태 변화	없음	있음
화면 새로고침 필요 여부	없음	필요
사용 사례	고정된 UI (예: 텍스트, 아이콘 등)	동적인 UI (예: 카운터, 애니메이션 등)

StatelessWidget은 "액자 속 사진"과 같습니다.
한 번 넣은 사진은 변하지 않죠.

StatefulWidget은 "디지털 액자"와 같습니다.
버튼을 누르면 사진이 바뀌는 것처럼, 상태에 따라 화면이 변화합니다.

결론 🎯

Flutter에서 앱을 개발할 때 화면이 고정적인지, 아니면 동적으로 변하는지를 먼저 판단하세요.

🖼️ 고정적이라면 → StatelessWidget
🔄 동적이라면 → StatefulWidget

위 두 가지를 적재적소에 활용하면, 더 효율적이고 아름다운 앱을 만들 수 있습니다! 🚀