Stateful Widget 생명주기에 대한 정리

 

📕정의 

생명주기에 대해 알아보기 전, 먼저 StatelessWidget과 StatefulWidget에 대해 알아보겠습니다. 

 

・ StatelessWidget : 값이 변하지않는 위젯으로 처음 한번만 빌드하고 그 화면이 변경되지 않고 유지됩니다. 

간단하게 예를 들면 한번 빌드되고나면 변경사항이 적용되지않을 기본 페이지라고 보시면 됩니다. 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

 

・ StatefulWidget : 변경 가능한 상태를 가진 위젯입니다.  UI가 동적으로 변경되어야 하는 경우 사용됩니다. 

예를 들어 체크박스, 라디오버튼, 슬라이더, InkWell, Form, TextField 등처럼 화면에 변경되는 사항이 보여져야할 때 사용됩니다. 

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);



  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

💡여기서 우리가 알고 넘어가야 할 것은 Stateful 위젯은 Stateless위젯에 비해 성능이 떨어지는 단점이 있습니다. 그렇기 때문에 빌드 과정을 기준으로 두 위젯을 비교해서 사용해야 합니다. 

 

 

📕Stateful 생명주기 메서드

가장 많이 쓰는 주요한 메서드만 알아보도록 하겠습니다. 

 

・ initState() 메서드 :

앱이 빌드될 때 최초로 호출되는 메서드입니다. 데이터를 초기화해줍니다. 

 

・ build() 메서드 :

위젯을 화면에 표시하는 메서드입니다. 화면에 표시할 위젯을 반환해야합니다. 

 

・ setState() 메서드 :

위젯의 상태를 갱신하는 메서드입니다. 위젯을 처음부터 다시 만들어주지만 initState()메서드는 호출되지 않습니다. 

 

・ didUpdateWidget() 메서드 :

위젯의 설정이 변경될 때 호출되는 메서드입니다. 

새 위젯을 이전 위젯과 비교하려면 이 방법을 사용합니다. 

@override
void didUpdateWidget(covariant MyHomePage oldWidget) {
  super.didUpdateWidget(oldWidget);
  // TODO: implement didUpdateWidget
}

 

・ dispose()메서드 : 

상태 객체가 위젯 트리에서 완전히 제거됩니다.

이 메서드가 호출되면 상태 객체는 더 이상 사용될 수 없습니다.

 

 

📕참고한 블로그 

 

https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

StatefulWidget class - widgets library - Dart API

 

 

https://medium.com/@dan_kim/%EB%B2%88%EC%97%AD-flutter-%EC%9C%84%EC%A0%AF-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-1a22231d25c6

[번역] Flutter 위젯 사용해보기

 

https://jaceshim.github.io/2019/01/28/flutter-study-stateful-widget-lifecycle/#

Stateful Widget Lifecycle(생명주기)

 

https://betterprogramming.pub/stateful-widget-lifecycle-a01c44dc89b0

The Stateful Widget Lifecycle