[Flutter] StatefulWidget vs StatelessWidget

앱 개발도중 기초적인 부분에서 헷갈려서 포스팅하면서 다시 한번 정리하고자합니다! Flutter에서는 화면에 무엇인가 표시하는 경우 모든 것을 Widget으로 처리합니다. 이러한 widget은 크게 StatefulWidget과  StatelessWidget 2개로 나뉩니다. 오늘은 이 두 위젯의 차이점에 대해 포스팅 하고자 합니다.

 

Stateless Widget

화면이 로드될 때 한 번만 그려지는 State변경이 불가능한 위젯으로 변경이 필요한 Data가 없는 것을 의미하며 이벤트 또는 사용자 상호 작용에 의해 동작하지 않습니다. 쉽게 말하면 한번 빌드 된 이후로 그 위젯의 상태에 관여할 수 없습니다. 보통 아래와 같이 간단하게 선언됩니다.

 

 

StatelessWidget을 상속하고, build() 함수를 @override 하고있습니다. build() 함수는 parameter로 context (context = 부모 Wiget의 정보임)를 받고 있고, Wiget 형을 return하게 되어 있습니다. build() 함수에서 다양한 Widget을 사용해서 각 App 고유의 GUI를 구성하게 됩니다. 

 

Stateful Widget

화면이 로드된 이후에도 State변경이 가능한 위젯으로 위젯이 동작하는 동안 Data 변경이 필요한 경우 화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로 이벤트 또는 사용자 상호 작용에 의해 동작합니다. 위의 코드를 StatefulWidget으로 변경해 보도록 하겠습니다.

이미 StatelessWidget으로 선언된 경우 위의 이미지처럼  Convert to StatefulWidget 메뉴를 선택하면 

이렇게 자동으로 StatefulWidget으로 바꿔줍니다. StatefulWidget 을 상속 받아 createState() 함수를 @override하고 있습니다.  createState() 함수는 _ListTileAppState() Class를 생성하고, 이는 State<ListTileApp>을 상속 받아 build() 함수를 @override 하고있습니다. 

 

StatefulWidget과  StatelessWidget의 생명주기(lifeCycle)

 

 

참고자료

https://kibua20.tistory.com/231

https://ifhead.tistory.com/entry/Flutter-Stateless-Widget%EA%B3%BC-Stateful-Widget-%EC%B0%A8%EC%9D%B4-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0