Flutter: StatelessWidget vs StatefulWidget

📌 1. StatelessWidget

✅ 개념

• 상태(state)가 없는 위젯
• 한 번 생성되면 UI가 변경되지 않음
• 외부에서 데이터가 바뀌면 새로 생성되어 다시 그려짐

✅ 특징

• 불변(immutable)
• 가볍고 성능이 좋음
• build() 메서드만 사용

✅ 사용 예시

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String title;

  const MyStatelessWidget({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

✅ 언제 사용?

• UI가 변하지 않을 때
• 단순한 화면 구성 (텍스트, 아이콘 등)

---

📌 2. StatefulWidget

✅ 개념

• 상태(state)를 가지는 위젯
• 상태가 바뀌면 UI도 함께 업데이트됨

✅ 구조

• StatefulWidget (껍데기)
• State (실제 상태 관리)

✅ 특징

• 동적인 UI 가능
• setState()로 UI 갱신
• 생명주기(Lifecycle) 존재

---

✅ 사용 예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  MyApp({super.key});

  int count =0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              Text("카운트:$count",style: Theme.of(context).textTheme.displaySmall),
              ElevatedButton(
                  onPressed: (){
                    count++;
                    print(count);
                  },
                  child: Text("증가",style: Theme.of(context).textTheme.displaySmall)
              )
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int count = 0;

  void _increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('증가'),
        )
      ],
    );
  }
}

권장 전체 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int count = 0;

  void _increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('증가'),
        )
      ],
    );
  }
}

---

📌 3. 핵심 차이 비교

구분	StatelessWidget	StatefulWidget
상태 관리	❌ 없음	✅ 있음
UI 변경	❌ 불가능	✅ 가능
성능	✅ 더 빠름	❌ 상대적으로 무거움
구조	단순	복잡 (State 클래스 필요)
사용 용도	정적인 화면	동적인 화면

---

📌 4. setState() 핵심 이해

setState(() {
  // 상태 변경
});

• 호출되면 build() 다시 실행됨
• UI 자동 업데이트
• Flutter의 핵심 동작 방식

---

📌 5. 선택 기준 (실무 기준)

👉 StatelessWidget 사용

• 변하지 않는 UI
• API 호출 없이 단순 표시

👉 StatefulWidget 사용

• 사용자 입력 (버튼, 입력창)
• API 데이터 반영
• 애니메이션
• 상태 변화 필요

---

📌 6. 한 줄 요약

👉 Stateless = 고정 UI / Stateful = 변화하는 UI

---

🚀 추가 팁 (중요)

실무에서는:

• 작은 단위는 StatelessWidget
• 상태가 필요한 부분만 StatefulWidget

👉 이렇게 최소 범위로 상태 관리하는 것이 성능에 좋음