반응형

Flutter에서 StatefulWidget과 StatelessWidget의 차이를 정리 했습니다. 



2022. 5. 21  최초작성

2022. 6. 6  StatefulWidget과 State 역할 관련 내용 설명 수정



다음 웹문서들을 참고하여 작성했습니다.

 

https://www.geeksforgeeks.org/what-is-widgets-in-flutter/?ref=lbp

 

https://itwise.tistory.com/29

 

https://docs.flutter.dev/development/ui/interactive 

 

https://www.geeksforgeeks.org/flutter-stateful-vs-stateless-widgets/

 

https://www.geeksforgeeks.org/difference-between-stateless-and-stateful-widget-in-flutter/

 

https://flutterbyexample.com/lesson/stateful-widget-lifecycle 




관련 포스트입니다.

 

Flutter 강좌 01 - 개발환경 만들기 및 앱 실행하는 방법

https://webnautes.tistory.com/1409 

 

Flutter 강좌 02 - 첫번째 앱 작성하기

https://webnautes.tistory.com/1411 

 

Flutter 강좌 04 - 위젯 간단히 살펴보기

https://webnautes.tistory.com/1698

 

 

Flutter에서 위젯(Widget)

플러터(Flutter)는 하나의 코드로 iOS와 Android 앱을 만들기 위한 Google의 프레임워크(framework)로 알려져있지만 실제론 Web, Desktop(Window, Linux, MacOS), Embedded까지 지원하는 멀티 플랫폼(multi-platform) 프레임워크입니다.



플러터는 위젯(Widget)를 기본 구성요소로  트리구조를 만들어 유저인터페이스(UI)를 구성합니다.

위젯은 구성(configuration) 및 상태(state)가 주어질 때 화면에 보여지는 뷰(view)가 어떤 모습이어야 하는지를 기술합니다.



플러터 애플리케이션의 각 요소는 위젯입니다. 화면에 보여지는 뷰는 앱을 만드는데 사용되는 위젯의 종류와 어떻게 위젯을 배치하는지 등 에 따라 달라집니다. 

 

Flutter 위젯은 제공하는 기능에 따라 14가지 카테고리로 나뉩니다. 

 

  • Accessibility : 플러터 애플리케이션에 더 쉽게 액세스할 수 있도록 합니다. 
  • Animation, Motion : 위젯에 애니메이션을 추가합니다.
  • Assets, Images, Icons : 이미지 및 아이콘 표시를 담당합니다. 
  • Async : 비동기 기능(async functionality)을 제공합니다.  
  • Basics : 모든 플러터 애플리케이션을 만들시 필수적으로 필요한 위젯들입니다. 
  • Cupertino : iOS에서 디자인을 담당하는 위젯입니다.
  • Input : 입력 기능을 제공합니다.
  • Interaction Models : 터치 이벤트 관리 및 사용자에게 다른 뷰로 전환을 제공합니다. 
  • Layout : 위젯의 배치 구성을 담당합니다.
  • Material Components : 구글의 머티리얼 디자인을 따르는 위젯 모음입니다.
  • Painting, effects: 레이아웃이나 모양을 변경하지 않고 자식 위젯에 시각적 변경 사항을 적용하는 위젯 모음입니다. 
  • Scrolling :  위젯에 스크롤 기능을 추가합니다. 
  • Styling : 앱의 테마, 응답성, 크기를 다룹니다.
  • Text : 스타일이 적용된 텍스트를 출력합니다.



State

State는 위젯의 상태를 저장하며 위젯이 생성될 때(위젯이 화면에 그려질 때)  위젯의 속성을 유지하는 객체입니다. 

예를 들어 CheckBox 위젯을 클릭하여 체크박스의 상태를 변경하면  변경된 상태는 State 객체에 유지됩니다. 

 

stateful 위젯과 stateless 위젯

플러터에서 위젯은 상태를 저장하는 stateful 위젯 또는 상태를 저장하지 않는 stateless 위젯 중 하나입니다.  예를 들어 사용자가 위젯과 상호 작용할 때 위젯의 상태가 변경되면 stateful 위젯이며 위젯의 상태가 변경되지 않으면 stateless 위젯입니다.  

 

Icon, IconButton, Text 같은 stateless 위젯은 사용자의 입력이나 데이터 수신 등에 의해 발생하는 이벤트에 의해서 상태가 변경되지 않으며 StatelessWidget의 하위 클래스입니다.

 

Checkbox, Radio, Slider, InkWell, Form, TextField 같은 stateful 위젯은 사용자의 입력이나 데이터 수신 등에 의해 발생한 이벤트에 의해서  위젯의 모양이 변경될 수 있으며 StatefulWidget의 하위 클래스입니다.

 

StatefulWidget를 상속받은 클래스는 화면이 바뀔때마다 재생성되기 때문에 위젯의 상태는 State를 상속받은 클래스가 담당하도록 합니다. 위젯의 상태는 슬라이더의 현재 값이나 체크박스 선택 여부와 같이 변경할 수 있는 값으로 구성됩니다. 

 

state 클래스에는 위젯  상태와 build() 메서드가 포함됩니다.  사용자의 입력이나 데이터 수신 등에 의해 발생한 이벤트로 위젯의 상태가 변경되면 상태 객체는 setState()를 호출하여 프레임워크가 위젯을 다시 그리도록 합니다.




첫번째 Flutter 강좌에서 실행시켜보았던 간단한 예제 프로그램을 잠시 살펴보겠습니다.

 

Flutter 강좌 01 - 개발환경 만들기 및 앱 실행하는 방법

https://webnautes.tistory.com/1409 

 

오른쪽 아래의 원형 버튼을 클릭하면 숫자가 증가하는 예제였습니다. 



문자열을 출력하고 있는 Text 위젯은 한번 화면에 출력되면 변경되지 않으므로 stateless 위젯입니다. 숫자를 출력하는 부분은 오른쪽 하단의 원형 버튼을 클릭할 때마다 값이 증가하므로 stateful 위젯입니다. 

 



Stateless Widget

 

Icon이나 Text처럼 일단 생성되어 화면에 보여지고 나면 위젯의 상태를 변경할 수 없는 위젯을 stateless 위젯이라고 합니다. 

이벤트나 사용자와의 상호작용에 따라 위젯의 상태를 변경할 필요가 없습니다. 따라서 위젯의 상태를 따로 저장할 필요가 없습니다.



Stateless 위젯의 기본 구조입니다. build() 메서드에서 화면에 보여줄 위젯을 리턴합니다. 



import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {


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



stateless 위젯의 클래스 이름은 runApp 함수에서 호출되는 MyApp입니다. StatelessWidget 클래스를 상속받습니다.

 

MyApp 클래스 내에서 build 함수가 재정의되고 BuildContext를 파라미터로 사용합니다.

BuildContext는 위젯 트리에서 위젯을 찾는 데 사용되므로 모든 위젯마다 고유합니다..

 

build 메소드는 Container 위젯안에 화면에 보여줄 위젯을 포함시켜 리턴합니다.  Stateless 위젯에서 build 함수는 한 번만 호출되어 화면에 위젯을 출력합니다. 



Stateful Widgets

 

CheckBox, RadioButton 처럼 생성되어 화면에 보여진 후에도 위젯 상태를 변경할 수 있는 위젯을 stateful 위젯이라고 합니다. 위젯의 상태는 여러 번 변경가능합니다. 

이벤트나 사용자와의 상호작용에 따라 위젯의 상태를 변경할 수 있습니다. 따라서 위젯의 상태를 따로 저장할 필요가 있습니다.

 

플러터는 StatefulWidget 위젯을 생성할 때 위젯 상태를 저장할 State 객체도 생성합니다.

StatefulWidget 위젯은 State 객체를 이용하여 위젯을 변경합니다. State 객체는 해당 위젯에 대한 모든 변경 가능한 상태가 유지되는 곳입니다. 

 

Stateful 위젯의 기본 구조입니다. createState()를 재정의하고 State 객체를 리턴합니다. 



import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}




Stateful 위젯의 클래스 이름은 runApp 함수에서 호출되는 MyApp입니다. StatefulWidget 클래스를 상속받습니다. 

 

MyApp 클래스에서 createState 함수를 재정의합니다. createState() 함수는 트리의 주어진 위치에서 해당 위젯을 변경 가능한 상태로 만드는 데 사용됩니다. 이 메서드는 state를 상속받은 클래스에 대한 인스턴스를 리턴합니다.

 

_MyAppState 클래스는 State 클래스를 상속받습니다. 위젯의 모든 변경 사항을 관리합니다. BuildContext를 파라미터로 사용하는 build 메소드가 재정의됩니다. build 메소드는 화면에 보여줄 위젯을 Container 위젯에 담아 리턴합니다. 

 

stateful 위젯이기 때문에 build 메소드가 여러 번 호출될 수 있으며, 호출 될때마다 위젯 상태의 변경사항을 반영하기 위해 위젯을 다시 생성하여  화면에  출력합니다. 

 

반응형

해보고 확인한 것을 문서화하여 기록합니다.


부족함이 있지만 도움이 되었으면 합니다.
잘못된 부분이나 개선점을 알려주시면 감사하겠습니다.



포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
문제가 생기면 포스트와 바뀐 환경이 있나 먼저 확인해보세요.

질문을 남겨주면 가능한 빨리 답변드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">