[Flutter] Stateless Widget과 Stateful Widget 차이 (+LifeCycle)

차이점

• StatelessWidget은 그려지고 나면 변화가 없는 요소
• StatefulWidget은 다시 그려질 수 있는 요소
• 양쪽 모두 State를 생성합니다. (Mutable / Immutable State)

라이프 사이클

• 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를 주로 쓰게 됩니다.