[Flutter] Stateful 위젯 생명주기 메서드

Stateless위젯

Stateless위젯에서는 변경하고 싶을 때마다 그 위젯을 파괴!하고 새로운 위젯으로 만들어야 합니다.

 

stateless위젯에서 생명주기는 간단합니다.

class Screen1 extends StatelessWidget{
	@override
    Widget build( BuildContext context ){
    	return null;
    }
}

보여주기만 하는 build()에서 화면에 표시할 모양이나 위젯을 생성하는 것입니다. 사실 상태는 있지만 불변성(immuteable)을 가지는 위젯이라 변경할 수 없습니다! 

Stateful위젯

Stateful한 위젯에서는 본격적으로 다양한 생명주기 메서드가 등장합니다.

void initState(){

}

Widget build(BuildContext context) {
	return null;
}

void deactivate(){

}

stateful한 위젯에서는 state값이 변경될 수 있으며, state값이 변경되면 앱을 업데이트 시킵니다.

이에 따라 다양한 생명주기 메서드를 정리합니다.

 

1. initState()

state가 처음 초기화 될 때 트리거되는 init상태가 있는데 initState()에서 초기화 해줍니다.

 

2. build()

위젯이 실제로 빌드 될 때 트리거되는 build() 메서드 입니다. - 실제 화면에 렌더링 되어 표시되어지는 부분

 

3. deactivate()

stateful 위젯이 파괴될 때 호출하는 메서드입니다.

 

 

import 'package:flutter/material.dart';
import 'screen1.dart';

class Screen2 extends StatefulWidget {
  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print('상태 저장 위젯이 생성되고 위젯트리에 추가되는 순간에 어떤 처리를 해줄 거라면 initState()에서 처리.')
    print('initState called!!');
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
    print(' 마지막으로 stateful위젯이 파괴될 때 어떤 일이 일어나길 원하면 deactivate메서드 내부에 코드 작성.')
    print('deactivate called!!');
  }

  @override
  Widget build(BuildContext context) {
    print('매번 stateful 위젯이 다시 빌드될 때 처리할 일은 build()에서 처리.');
    print('build called - 위젯 렌더링');
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text('Screen 2'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blue,
          child: Text('Go Back To Screen 1'),
          onPressed: () {
            // context는 Screen2 위젯의 현재 빌드 컨텍스트가 될 것.
            Navigator.pop(
              context,
              MaterialPageRoute(
                builder: (context) => Screen1(),
              ),
            );
          },
        ),
      ),
    );
  }
}