[Flutter] Stateful, Stateless 위젯 , 앱 생명주기

Flutter를 사용하다 보면 화면에 무엇인가 표시하는 경우 모든 것을 Widget으로 처리합니다. Flutter의 Widget은 React의 Component DOM tree와 유사한 개념이며, 상태 관리에 따라서 상태 변경이 가능한 Stateful Widget과 상태 변경이 불가능한 Stateless Widget으로 구분할 수 있습니다.

** 여기서 state 란 앱의 모습을 바꿀 수 있는 데이터를 뜻한다!

1. Stateless Widget

공식 문서를 해석해해보면

"변경 가능한 상태가 필요하지 않은 위젯"

이라고 나와있습니다.

정리해보면

1. 스크린상에 존재만 할 뿐 아무것도 하지 않음
2. 어떠한 실시간 데이터도 저장하지 않음
3. 어떤 변화(모양,상태)를 유발하는 value값을 가지지 않음.
4. 모든 값이 final 상수이다.

라고 보면 될꺼같습니다. 예시를 한번 보겠습니다.

• stateless

class 비상태클래스 extends StatelessWidget {
  const 비상태클래스({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

2. Stateful Widget

공식 문서를 해석해보면

"변경 가능한 상태를 가진 위젯"

이라고 하네요!

정의 해보면

정의: Value 값을 지속적으로 추적 및 보존 (계속 움직임이나 변화가 있는 위젯)

1. 사용자의 상호작용에 따라서 모양이 바뀜
2. 데이터를 받게 되었을 때 모양이 바뀜

3. flutter widget tree

1. Widget들은 tree 구조로 정리 될 수 있음
2. 한 Widget내에 얼마든지 다른 Widget들이 포함 될 수 있음
3. Widget은 부모 위젯과 자식 위젯으로 구성

Parent widget을 widget container라고 부르기도 함

라이프 사이클

• StatelessWidget은 한 번 그려지면 끝입니다
• StatefulWidget의 라이프 사이클

실행되는 메소드

주요 메소드

createState()

새로운 Stateful 위젯을 만들 때 생성되며 state 인스턴스를 반환합니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

mounted(true)

State object를 생성하면, 프레임워크는 mounted라는 boolean 속성을 true로 설정해서, State object를 BuildContext와 연결한다. 이 속성은 이 State object가 현재 위젯 트리에 있는지, 없는 지에 대한 정보를 제공한다.

이 단계는 생명 주기의 실제 단계로 표시되지않지만, background에서 진행 중인 작업을 아는 것이 중요하다.

initState()

위젯이 생성될때 처음 한 번 호출됩니다.

super.initState() 형태로 사용합니다.

용도

1. 생성된 위젯 인스턴스의 BuildContext에 의존적인 것들의 데이터 초기화
2. 트리에서 부모 위젯과 관련된 속성을 초기화
3. Stream 구독, 알림변경, 또는 위젯의 데이터를 변경할 수 있는 다른 객체 핸들링

@override
void initState() {
  super.initState();
  // TODO: implement initState
}

didChangeDependencies()

위젯이 처음 빌드된 직후에 호출됩니다.

또한 위젯이 의존하는 데이터의 객체가 호출될 때마다 호출됩니다.

비용이 큰 액션(API호출 등)이 필요한 경우 유용합니다.

build()

사용자 입력에 반응하므로 자주 호출됩니다. (fps+render)

필수이며, 오버라이드 해야하고, 반드시 Widget을 리턴해야합니다.

화면에 위젯을 렌더링할 때 매번 호출됩니다.

didUpdateWidget()

부모 위젯이 구성을 변경하고, 위젯을 다시 build해야하는 경우에 호출된다.

프레임워크는 이전 위젯을 새 위젯과 비교하는데 사용할 수 있는 argument를 준다.

Tip: 새 위젯을 이전 위젯과 비교해야 하는 경우에 didUpdateWidget() 사용하자.

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

setState()

setState 메서드는 플러터와 개발자가 자주 호출합니다.

UI에 영향을 줄 가능성이 있는 변경이 일어났음을 알립니다.

동기적인 callback을 사용하므로 비동기적으로 응용할 수 없습니다.

이 다음에 build()가 업데이트해줍니다.

dispose()

dispose는 State객체가 영구적으로 제거될 때 호출됩니다.

mounted(false)

dispose() method 다음에는 State object가 현재 트리에 없으므로 mounted 속성은 이제 false다. state object는 다시 mount할 수 없고, setState()가 호출되면 에러가 발생한다.

StatefulWidget과 State의 동작과정

StatefulWidget은 스택입니다

StatefulWidget은 비쌉니다

가능한 경우 Stateless를 쓰는 것이 좋습니다.

Stateful은 필요할 때에만 사용하도록 합니다.

State를 편하게 관리하도록 도와주는 패키지는 bloc, provider, getx 등이 있습니다.

위와 같은 패키지를 쓰면 Stateless를 주로 쓰게 됩니다.