Stateful Widget 기본 구조 살펴보기

1. Stateless Widget과 Stateful Widget 비교

• 공통점
  • 두 위젯 모두 생성자를 통해 외부에서 데이터가 입력되면, 결과를 반영하기 위해 build method가 호출되면서 위젯들이 rebuild되고 필요한 ui를 다시 render
• 차이점
  • Stateful Widget은 내부에 state라는 또 다른 클래스를 가지고 있음. build method는 State클래스가 가지고 있어, State 클래스에 의해 위젯들이 rebuild되고 필요한 UI를 다시 render하게됨
  • Stateful Widget이 rebuild되는 경우는 2가지
    • Child 위젯의 생성자를 통해서 데이터가 전달 될 때
    • Internal state가 바뀔 때

2. Stateful Widget 구조

다음은 플러터 프로젝트에서 생성된 기본 파일이다.

• Stateful Widget은 두 클래스의 결합으로 이루어져 있음
• MyHomePageState는 State 클래스를 상속함

💛 왜 두개의 클래스로 이루어져 있는가?

• StatefulWidget은 Widget 클래스를 상속하는데, Widget은 immutable 특징을 가지고 있어 한번 생성되면 변하지 않음
• 따라서 MyHomePage 클래스 역시 StatefulWidget을 상속받아 StatelessWidget 처럼 변하지 않는 Widget
• 변하는 state 값을 반영하기 위해 MyHomePage 클래스는 immutable 특성을 유지하고, MyHomePageState 클래스는 mutable한 특징을 대신하여 상태를 관리하는 역할을 함

💛 코드 설명

• createState()
  • StatefulWidget인 MyHomePage는 createState()를 통해서 _MyHomePageState()라는 State 객체를 생성
  • 이는 StatefulWidget이 처음 생성되는 순간에만 호출
  • 반환된 State 객체는 그 후 StatefulWidget과 생명 주기를 공유하게 됨
• setState()
  • 상태가 변경될 때마다 호출되어야 함
  • 이 메서드를 호출하면 Flutter 프레임워크는 build 메서드를 호출하여 UI를 다시 그리게 됨
• build 메서드
  • StatefulWidget의 UI를 빌드하는 역할.
  • StatefulWidget의 상태에 따라 UI를 동적으로 구성하며, setState()가 호출될 때마다 다시 호출됨
  • .따라서 build 메서드 내에서는 변화하는 상태를 반영한 UI를 반환

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
    });
  }
	@override
	  Widget build(BuildContext context) {
	    return ...
	
	  }
}