[Flutter 트랙] 앱개발 종합반 2-2 - Stateless와 Stateful 위젯 살펴보기

📌 Stateless vs Stateful 위젯 살펴보기

Flutter에서 모든 UI 요소는 위젯(Widget)으로 구성됩니다. 이번 강의에서는 StatelessWidget과 StatefulWidget의 개념과 차이점을 학습합니다.

---

1. StatelessWidget (스테이트레스 위젯)

StatelessWidget은 한 번 생성되면 변경되지 않는 위젯입니다. 즉, **Immutable(불변)**한 특성을 가지며, **내부 상태를 가질 수 없습니다**.

📌 StatelessWidget의 특징

• 상태(State)가 없는 정적 UI를 표현
• 한 번 생성되면 변경되지 않음 (Immutable 특성)
• 빠른 렌더링과 성능 최적화 가능
• 빌드 함수(build())가 한 번만 실행됨

📌 StatelessWidget 예제

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Stateless Widget')),
            body: Center(
                child: Text('나는 변하지 않는 위젯입니다!'),
            ),
        );
    }
}

void main() {
    runApp(MaterialApp(home: MyStatelessWidget()));
}

---

2. StatefulWidget (스테이트풀 위젯)

StatefulWidget은 상태(State)에 따라 UI가 변경되는 동적인 위젯입니다. 즉, 내부 변수를 관리하며, **사용자 입력이나 이벤트에 따라 변경될 수 있는 UI**를 만듭니다.

📌 StatefulWidget의 특징

• 변경 가능한 UI (Mutable State)를 표현
• setState()를 호출하여 상태 변경 가능
• 사용자 입력, 네트워크 요청 등의 이벤트를 반영
• 라이프사이클 관리가 필요

📌 StatefulWidget 예제

import 'package:flutter/material.dart';

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

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

    void incrementCounter() {
        setState(() {
            counter++;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Stateful Widget')),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Text('카운트: $counter', style: TextStyle(fontSize: 24)),
                        ElevatedButton(
                            onPressed: incrementCounter,
                            child: Text('증가'),
                        ),
                    ],
                ),
            ),
        );
    }
}

void main() {
    runApp(MaterialApp(home: CounterWidget()));
}

---

3. Stateless vs Stateful 비교

구분	StatelessWidget	StatefulWidget
상태 변화	불가능 (Immutable)	가능 (setState() 사용)
사용 예시	정적 UI (텍스트, 아이콘, 이미지)	동적 UI (버튼 클릭, 애니메이션, 네트워크 요청)
렌더링 방식	한 번만 빌드됨	상태 변경 시 빌드됨
성능	빠름	조금 느림 (상태 변경 시 재빌드)

---

4. 위젯의 라이프사이클 (Lifecycle)

Flutter에서는 위젯이 생성되고 사라지는 과정을 "라이프사이클(Lifecycle)"이라고 합니다.

📌 StatelessWidget의 라이프사이클

StatelessWidget은 **한 번 생성되면 변경되지 않으며, 생성자 → 빌드 → 종료** 단계를 가집니다.

StatelessWidget 생성 → build() 실행 → UI 출력 → 종료

📌 StatefulWidget의 라이프사이클

StatefulWidget은 상태 변화에 따라 여러 단계의 라이프사이클을 가집니다.

1. createState() → 상태 객체 생성
2. initState() → 초기화 작업 (한 번만 실행됨)
3. build() → UI 렌더링
4. setState() → 상태 변경 시 다시 build() 호출
5. deactivate() → 위젯이 제거되기 전 실행됨
6. dispose() → 위젯이 완전히 제거될 때 실행됨

📌 StatefulWidget 라이프사이클 예제

class MyStatefulWidget extends StatefulWidget {
    @override
    _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
    @override
    void initState() {
        super.initState();
        print('initState() 호출됨');
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Stateful Lifecycle')),
            body: Center(
                child: Text('라이프사이클 테스트 중'),
            ),
        );
    }

    @override
    void dispose() {
        print('dispose() 호출됨');
        super.dispose();
    }
}

---

5. 결론

• 📌 StatelessWidget은 변경되지 않는 정적 UI를 만들 때 사용
• 📌 StatefulWidget은 사용자 입력이나 이벤트에 따라 변경되는 UI를 만들 때 사용
• 📌 StatefulWidget은 setState()를 사용하여 UI를 업데이트함
• 📌 StatefulWidget은 라이프사이클을 이해하고 활용하는 것이 중요

다음 강의에서는 Flutter의 다양한 UI 위젯을 학습하고 실습을 진행하겠습니다! 🚀