[flutter]2. flutter StatelessWidget, StatefulWidget

안녕하세요 !

오늘은 플러터의 기본적인 StatelessWidget , StatelessWidget에 대해서 알아보려고 합니다.

flutter 메인 홈페이지의 Document에서 제일 처음으로 나오는 내용이죠 !

 

1. StatelessWidget 

먼저 공식 홈페이지에서 확인해보자면.

StatelessWidget은  "변경 가능한 상태가 필요하지 않은 위젯" 이라고 합니다.

조금 쉽게 설명을 드리자면, 화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로

변경이 필요한 Data가 없는 것을 의미하며 이벤트 또는 사용자 상호 작용에 의해서 동작하지 않습니다.

쉽게 예를 들면, 가게를 소개하는 앱이라면 가게 안내, 위치, 메뉴 안내 같은 화면들은 

사용자와 상호작용이 필요 없는 화면이므로 StatelessWidget으로 구성하면 되는 것이죠 !

Tip: Widget 이란?
     UI를 만드는 기본 단위, 플러터는 모든 것이 위젯으로 구성되어 있다.

 

저희가 처음 프로젝트를 만들면 이렇게 코드가 구성되어 있습니다.

여기서 보시면  Myapp class 는 StatelessWidget으로 만들어져 있네요 ! 

 

 

현재 기본 코드에서는 title 영역이나, theme 영역이 변경될 일이 없으므로 Home 영역을 제외한 곳은

StatelessWidget 으로 되어있군요!

 

조금은 이해가 되셨나요 ?

결론적으로 StatelessWidget은  바뀔 필요가 없는 화면은 Stateless 화면으로 구현한다!

 

2. StatefulWidget 

그렇다면 이번엔 StatefulWidget을 알아볼까요 ?

먼저 공식 홈페이지에서 확인해보자면.

StatefulWidget은 "변경 가능한 상태를 가진 위젯" 이라고 설명이 표기되어 있네요.

그렇다면 변경을 할 위젯이라면 StatefulWidget 으로 구현을 하면 되는 것이군요 !

그리고 아래의 글을 더 참고하자면 State의  setState 메소드를 활용해서 state가 변경될때 즉시

알람을 받도록 구현하라고 되어있네요.

그럼 아까 기본 소스코드에서 확인을 해볼까요 ? 

여기보이는 MyHomePage라는 class를 확인해보면 2가지의 class로 분리되어 있습니다.

먼저 메인 Build에서 불러오는 MyHomePage는 StatefulWidget으로 구현이 되어 있군요!

소스 하단 부분을 보면 floatingActionButton이 _incrementCounter 함수를 불러오고 
그 함수안에는 setState를 불러와 _counter를 증가 시키고 있네요 !

 

 

디버깅된 화면을 보면  counter 증가가 버튼에 반응하여 증가되게 됩니다. !

setState 메서드에 변경된 값을 플랫폼에 다시 전달하여 Build 메서드가 호출되어 화면을 다시 그리고 변경된 내용이 반영되는 구조이군요.이제 StatefulWidget에 저금 정리가 되시나요 ?

 

간단하게 정리하자면

StatelessWidget  : 바뀔 필요가 없는 화면 (Icon,Text, etc...) 

StatefulWidget :  바뀔 필요가 있는 화면 (CheckBox, Radio, TextField) 

이라고 생각하시면 간편합니다 !

오늘은 기본적인 두가지 함수 StatelessWidget, StatefulWidget 에 대해서 알아봤습니다.

공식 문서를 통해 좀 더 자세히 알아보고싶으시면 아래 링크를 클릭해 주세요!

오늘도 긴글 읽어주셔서 감사합니다 :) 혹시 문제가 되거나, 틀린점이 있다면 댓글로 달아주세요 !

Flutter - Dart API docs