[flutter] StatelessWidget 과 StatefulWidget

상태란 뭘까?

Stateless Widget과 고정상태

import 'package:flutter/material.dart';


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

// Stateless
// 상태의 변화 없이 항상 동일한 UI를 그립니다.
// 이런 위젯은 데이터나 변수의 값이 변하지 않을 때 사용합니다.

class MyStatelessWidget extends StatelessWidget {
  // 변수에 final 키워드 즉 상수이다. 
  final msg = '안녕하세요! 저는 Stateless 위젯입니다.';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateless Widget Example'),
      ),
      body: Center(
        child: Text(msg),
      ),
    );
  }
}

Stateless 위젯을 "변화할 수 있는 요소가 없기 때문에 상태가 없다"라고 표현합니다.

Stateless 위젯은 고정된 상태를 가지며, UI를 그릴 때마다 항상 동일하게 그려집니다. 이러한 특성 때문에 데이터나 변수의 값이 변경되지 않는 경우에 적합합니다.

StatefulWidget

import 'package:flutter/material.dart';

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

// 포인트 !
// 사실 상태는 변수에 할당된 값 입니다. 단, 변화할 수 있는 변수입니다. 
class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  // final + 변수 = 상수 
  final msg = '저는 Statefull 위젯입니다.';

  // fianl이 아님 상수가 아니기 때문에 언제든지 변경이 가능하다.
  // 즉 여기는 "상태 변수"라고 하자
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            // setState()는 상태가 변경되었음을 Flutter 프레임워크에 알려주는 함수입니다.
            // 이를 통해 프레임워크가 해당 위젯을 다시 그려서(build() 재호출) 변경된 상태를 반영할 수 있도록 합니다.
            setState(() {
              count += 1;
            });

          },
          child: Text('$msg onTap Count : $count'),
        ),
      ),
    );
  }
}

final 은 한번 초기화되면 다시 변경할 수 없다.
set State는 화면이 다시 그려지는 것임
=> setState()는 상태가 변경되었음을 Flutter 프레임워크에 알려주는 함수이다.
이를 통해 프레임워크가 해당 위젯을 다시 그려서(build() 재호출) 변경된 상태를 반영할 수 있도록 합니다.
처음부터 객체가 다시 로딩됨을 확인할 수 있다.

핵심정리

Stateless vs Stateful

• Stateless: 상태가 없고 UI가 항상 동일합니다. (예: 고정된 텍스트, 단순 버튼)
• Stateful: 상태가 변할 수 있으며, 그에 따라 UI가 변경됩니다. (예: 버튼 클릭 시 증가하는 카운터)

상태란?

• 상태는 변수에 할당된 값입니다. Stateful 위젯에서는 이 상태가 변할 때마다 UI가 업데이트되어 사용자에게 변화가 반영됩니다.

• Stateless 위젯은 사진처럼 항상 똑같이 보이는 요소라고 생각하세요.

• Stateful 위젯은 동영상처럼 시간이 지나면서 변화하는 요소라고 생각할 수 있습니다. 그래서 우리가 어떤 액션을 할 때마다 상태가 변하고 화면에 변화가 나타납니다.