StatelessWidget vs StatefulWidget

1. StatelessWidget이란?

• 상태가 변하지 않는 위젯입니다.
• UI가 고정적이며, 입력이 들어와도 변하지 않는 경우에 사용합니다.
• 예:단순한 아이콘, 라벨, 고정 텍스트 등

예:

class MyStaticWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('나는 변하지 않는 텍스트!');
  }
}

2. StatefulWidget이란?

• 상태를 가지며 setState()를 통해 동적으로 UI를 변경할 수 있습니다.
• 사용자 입력, 애니메이션 등 변화가 필요한 경우에 사용합니다.

예:

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('버튼 클릭 횟수: $counter'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              counter++;
            });
          },
          child: Text('클릭'),
        ),
      ],
    );
  }
}

3. 언제 각각 사용해야 할까?

상황	StatelessWidget	StatefulWidget
화면이 고정된 텍스트 이미지	✅
버튼 클릭 등 동적인 변화가 필요할 때		✅
외부 데이터에 따라 UI가 바뀔 때		✅

4. 따라하기 미션

• StatefulWidget으로 나만의 카운터 앱을 만들어 보고 setState()로 숫자가 올라가는 원리를 이해해보세요

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '나만의 카운터 앱',
      home: CounterApp(),
    );
  }
}

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('카운터 예제')),
      body: Center(
        child: Text(
          '$_counter',
          style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}