📌 Day 4: Dart & Flutter 기초부터 실전까지! StatelessWidget vs StatefulWidget 기본 개념 정리

📌 주제

🚀 Flutter 기본 개념 StatelessWidget 과 StatefulWidget

✔ State(상태) 란 무엇인가
✔ StatelessWidget & StatefulWidget 차이와 사용법

---

1️⃣ 상태(State)란 무엇인가?

📌 Flutter 에서 "상태(State)"란?

• 앱에서 변경될 수 있는 값.
• 예를 들면, 버튼 클릭 횟수, 텍스트 입력값, API에서 가져온 데이터 등이 상태에 해당됨.
• Flutter에서는 setState()를 사용하여 상태를 변경할 수 있음.

---

2️⃣ StatelessWidget vs StatefulWidget 개념

📌 Flutter 의 모든 화면(UI)은 위젯(Widget)으로 구성됨.
📌 위젯은 크게 StatelessWidget 과 StatefulWidget 두 가지로 나뉨.

✔ StatelessWidget (변경되지 않는 UI)

• "상태(State) 변화가 없는" 정적인 UI
• 한 번 생성되면 변경되지 않음
• 예시: 텍스트, 아이콘, 버튼과 같은 단순한 UI 구성

✔ 사용 예시:
✅ 정적인 UI (텍스트, 버튼, 아이콘)
✅ 사용자 입력을 받지 않는 위젯
✅ 단순한 스타일링

✔ StatefulWidget (변경되는 UI)

• "상태(State) 변화가 필요한" 동적인 UI
• setState() 메서드를 사용하여 화면을 갱신
• 예시: 사용자 입력, 애니메이션, 버튼 클릭 시 UI 변경

✔ 사용 예시:
✅ 버튼을 클릭하면 숫자가 증가하는 UI
✅ 텍스트 필드 입력을 반영하는 UI
✅ 애니메이션 적용이 필요한 UI

---

3️⃣ StatelessWidget 예제 (정적인 UI)

📌 StatelessWidget은 상태 변화가 없으므로 UI가 한 번만 빌드됨

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StatelessWidget 예제',
      home: const HomeScreen(),
    );
  }
}

// StatelessWidget 구현
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('StatelessWidget 예제')),
      body: const Center(
        child: Text(
          '이 화면은 변경되지 않습니다!',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

✔ 실행 결과:

• 앱을 실행하면 "이 화면은 변경되지 않습니다!" 라는 텍스트가 보임
• 버튼을 추가해도 화면은 변경되지 않음

📌 결론: StatelessWidget은 변경되지 않는 UI에 사용

---

4️⃣ StatefulWidget 예제 (버튼 클릭 시 UI 변경)

📌 StatefulWidget을 사용하면 사용자의 액션에 따라 UI를 변경할 수 있음

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StatefulWidget 예제',
      home: const CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});
  
  @override
  CounterScreenState createState() => CounterScreenState();
}

class CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('StatefulWidget 예제')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('버튼 클릭 횟수:', style: TextStyle(fontSize: 18),),
            Text(
              '$_counter',
              style: const TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
              
            ),
            const SizedBox(height: 20,),
            ElevatedButton(onPressed: _incrementCounter, child: const Text("숫자 증가"))
          ],
        )
      )
    );
  }

}

✔ 실행 결과:

• 버튼을 누를 때마다 숫자(_counter) 가 증가함
• setState()를 호출하면 UI가 다시 빌드됨

📌 결론: StatefulWidget은 사용자의 입력에 따라 UI가 변경될 때 사용

📌 StatefulWidget에서 setState()의 역할

✔ setState()는 StatefulWidget 의 상태(State)를 변경하고 UI를 다시 빌드하는 함수.
✔ 이 함수가 호출되면, Flutter는 해당 위젯을 재빌드(rebuild) 하여 변경된 UI를 반영함.

---

5️⃣ StatelessWidget vs StatefulWidget 차이점 정리

📌 차이점

상태 변화	❌ 없음	✅ 있음 (setState())
UI 업데이트	❌ 변경 불가	✅ 가능
성능	✅ 가볍고 빠름	❌ 상대적으로 무거움
사용 예시	앱 로고, 정보 화면	로그인 화면, 채팅 앱

📌 선택 기준

정적인 UI	StatelessWidget
버튼 클릭 시 UI 변경	StatefulWidget
API 데이터 가져오기	StatefulWidget
단순한 UI 요소	StatelessWidget

---

6️⃣ StatefulWidget 을 사용할 때 주의할 점

1️⃣ 성능 저하 가능성 → setState()가 자주 호출되면 불필요한 UI 렌더링이 발생할 수 있음
2️⃣ 상태 관리 복잡성 → 여러 개의 StatefulWidget이 상호작용하면 관리가 어려워질 수 있음
3️⃣ 코드 유지보수 어려움 → 상태가 여러 곳에서 관리되면 유지보수가 어려워질 수 있음

✅ 해결 방법

• Provider, Riverpod 같은 상태 관리 패턴을 활용하여 전역 상태 관리
• setState()는 최소한으로 사용하여 불필요한 렌더링 방지

▶️ 상태 관리 복잡성 사례

• 할 일 목록(Todo List 앱) 의 기본 List 에 여러가지 정보(제목, 상세내용, 날짜, 완료상태여부, 긴급여부 등) 가 추가될 수 있음.
• 이 때, 각 정보에 따라 setState() 를 여러 스크린에서 사용하는 경우 정보에 대한 동기화가 꼬이면서 적용되지 않는 경우가 생김.

---

7️⃣ StatefulWidget 없이 상태를 관리하는 방법

Provider, Riverpod, Bloc 같은 상태 관리 패턴을 활용하면 StatefulWidget 없이도 상태를 효율적으로 관리 가능.

✅ 상태 관리 패턴 예시 (Provider 사용)

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // UI 업데이트
  }
}

📌 이런 상태 관리 패턴을 사용하면 StatefulWidget 없이도 상태를 공유할 수 있음.
📌 추후 상태 관리 패턴 글에서 자세히 다룰 예정.

---

📌 오늘의 실습 과제

✅ [실습 1] StatelessWidget을 사용하여 단순한 UI 화면 만들기
✅ [실습 2] StatefulWidget을 사용하여 버튼 클릭 시 색상이 변경되는 UI 만들기
➡ 관련 글 👉 바로가기
✅ [실습 3] setState()를 사용하여 텍스트 필드에 입력한 값이 실시간으로 표시되는 UI 구현
➡ 관련 글 👉 바로가기