[Flutter] Stateless Widget과 Stateful Widget

✅ Stateless Widget (SLW)

 변화가 없는 정적인 위젯

 build 메서드를 통해 단지 UI를 출력하는 역할

 build 메서드가 한 번 수행되면 다시는 호출되지 않음

 내용을 갱신할 수 없는 위젯으로 생명주기가 없음

 State가 변하지 않는 위젯

 

✅ Stateful Widget (SFW)

 움직임이나 변화가 있는 위젯 

 두 클래스(Stateful Widget + State)의 결합으로 이루어져 있음

 SLW와 다르게 State 클래스를 별도로 구성하여 사용

 UI 변경(내용 갱신)을 위해 'setState' 메서드를 사용

 생명주기를 10단계로 구분

 

 

❔ SFW은 왜 두 개의 클래스로 나뉘어 있을까

SFW은 'Widget' 클래스를 상속 받는다.

'Widget' 클래스 기본적으로 immutable(불변) 즉, 한 번 생성되면 state가 변하지 않음.
따라서 SFW 클래스를 상속 받은 'MyWidget' 클래스는 SFW임과 동시에 immutable한 위젯이다.

 

하지만 SFW는 반드시 state의 변화를 반영(mutable)해야 함.

이 문제를 해결하기 위해 두 개의 클래스로 나누어 SFW위젯인 'MyWidget' 위젯은 immutable 특징을 유지하고,

'MyWidgetState' 클래스는 mutable 속성을 가지도록 함

이후 두 클래스는 State클래스의 제네릭을 통해 연결 함.

// Stateful Widget 클래스
// immutable
class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();  // SFW가 생성될 때마다 createState() 메서드 호출
}

// State 클래스
// mutable
class _MyWidgetState extends State<MyWidget> { // 'State' 상속 받음, 제네릭을 통해 SFW 클래스와 연결
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}