
이번에는 Flutter에서 화면 이미지의 기본이 되는,
StatelessWidget과StatefulWidget에 대해 개요와 사용법을 설명하겠습니다.
StatelessWidget과 StatefulWidget
먼저, StatelessWidget과 StatefulWidget의 Widget(위젯)이란,
화면이나 버튼, 텍스트 상자 등 화면에 표현하기 위해 클라이언트의 클래스를 의미합니다.
Flutter는 Widget을 사용하여 앱의 기능과 디자인을 표현합니다.
Widget 중에서,
값의 상태를 유지하지 않는 Widget → StatelessWidget,
값의 상태를 유지하는 Widget → StatefulWidget
으로 구분됩니다.
값의 상태를 유지한다는 것은 무엇인가?
앱 안에는, 항상 표시되는 정보가 변화하지 않는 요소와,
사용자의 조작에 따라 표시되는 것이 변화하는 요소가 존재합니다.
항상 표시되는 정보가 변화하지 않는 요소
・타이틀 바
・아이콘
・편집 불가능한 텍스트 필드 등
→이들은 한 번 그려지면 변하지 않습니다.
표시되는 것이 변화하는 요소
・카운터 표시
・로그인 상태
・편집 가능한 텍스트 필드 등
→이들은 내용이 변화할 경우 다시 그려집니다.
StatelessWidget의 코드
아래는 StatelessWidget의 코드입니다.
앱의 중심에 지정된 텍스트 필드를 표시하는 화면입니다.
중심의 텍스트 필드는 변경되지 않으며, 다시 그려지지 않습니다.
StatefulWidget의 코드
아래는 StatefulWidget의 코드입니다.
앱의 중심에 카운터가 있고, 앱 화면 상의 버튼을 클릭하면
카운터가 +1 됩니다.
이 카운터는 버튼이 눌릴 때마다 내용이 동적으로 변화합니다.
이것이 “값의 상태를 유지하고 있다”는 것입니다.
또한, Widget이 가지고 있는 값의 상태를 State라고 합니다.
StatefulWidget에 대하여
위의 StatefulWidget 코드를 보면 MyApp 클래스와 _MyAppState 클래스로 구성되어 있습니다.
MyApp 클래스
이 클래스는 StatefulWidget입니다.
MyApp 클래스는 _MyAppState 클래스를 호출합니다.
_MyAppState 클래스
이 클래스는 MyApp 클래스에서 호출됩니다.
메인 카운터 화면을 설계하며, 여기서 카운터의 State를 관리합니다.
실제로 다시 그려지는 것은 _MyAppState 클래스(State)뿐이며,
MyApp 클래스(StatefulWidget)는 한 번 정의되면 변경되지 않습니다.
MyApp 클래스는 정적인 화면 설정과 설계를 수행하며,
실제로 동적으로 다시 그려지는 화면은 _MyAppState 클래스입니다.
상태 관리에 대하여
이번에는 하나의 상태 변화에 대해 설명하고 있지만, 실제로 앱을 만들 때는,
다양한 상태 정보를 여러 화면에서 표현해야 할 필요가 있습니다.
그러나, StatefulWidget에서는 여러 화면에서 이용하는 글로벌 상태를 관리하는 것이
어렵다는 문제가 있습니다.

그래서, 글로벌 상태 관리도 간단히 할 수 있는 “Riverpod”가 자주 사용됩니다!
Riverpod에 대해서는 아래 글을 참조하세요.
마지막으로
앱에서는 거의 반드시 필요한 상태 관리지만,
클라이언트 부분의 개념이기 때문에, 처음 접하는 분들은 이해하기 어려울 수 있습니다.
이 글이 조금이라도 이해에 도움이 되기를 바랍니다.
끝까지 읽어주셔서 감사합니다!!