Widget & State

플러터의 가장 기본 요소인 Widget 과 State 를 알아봅니다. 플러터 앱을 개발하기 위해서는 이 두 가지 개념을 명확히 이해하는 것이 중요합니다.

•

Widget

•

State

•

Widget Type

◦

StatelessWidget

◦

StatefulWidget

•

Widget LifeCycle

Widget(위젯)

화면에 표시되는 모든 UI 요소

플러터는 위젯을 사용하여 모바일 앱, 웹 앱, 데스크톱 앱 등을 개발할 수 있는 다목적 UI 프레임워크입니다. 위젯은 UI를 빌드하고 레이아웃을 정의하며, 사용자 인터페이스의 각 부분을 표현합니다.

위젯의 종류

종류	설명	예시
기본 위젯	기본적인 UI 요소를 표현하는 위젯	Text, Image, Icon, Button
레이아웃 위젯	다른 위젯들을 배치하고 구성하는 위젯	Container, Row, Column, Stack
입력 위젯	사용자 입력을 받는 위젯	TextField, Checkbox, Radio, Switch
네비게이션 위젯	화면 이동과 관련된 위젯	AppBar, Drawer, BottomNavigationBar

State(상태)

화면을 갱신하기 위해서 위젯에서 관리하는 데이터

앱의 상태는 사용자와의 상호 작용, 데이터의 변경 등에 따라 변할 수 있습니다. 상태는 주로 StatefulWidget 클래스 내에 정의되며, 해당 클래스를 통해 상태를 변경하고 관리할 수 있습니다.

ex) 카운터 앱

•

+ 버튼을 누르면 화면의 숫자가 1씩 증가합니다.

•

화면의 숫자가 갱신되기 위해서 해당 위젯에서 숫자를 state 로 관리합니다.

Widget Type (위젯 타입)

플러터의 위젯은 상태의 유무에 따라 크게 두 가지 타입으로 분류할 수 있습니다

구분	StatelessWidget	StatefulWidget
상태 여부	상태 없음	상태 있음
특징	한번 생성되면 변경되지 않음	상태에 따라 동적으로 변경 가능
사용 사례	정적인 UI (텍스트, 이미지 표시)	동적인 UI (사용자 입력, 데이터 변경)
갱신 여부	갱신 불가능	setState()를 통해 갱신 가능

StatelessWidget

상태가 없는 위젯

StatelessWidget은 상태를 가지지 않는 위젯입니다. 한 번 생성되면 그 상태가 변하지 않으며, 변경되지 않는 정적인 UI를 구성하는 데 사용됩니다. 예를 들어, 단순한 텍스트 표시나 이미지 등을 포함하는 정적인 화면을 만들 때 유용합니다. StatelessWidget은 build() 메서드만을 구현하고, 상태 변경이 필요하지 않을 때 사용됩니다.

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello, Stateless Widget!'),
    );
  }
}
Dart
복사

StatefulWidget

상태를 가지는 위젯

StatefulWidget은 상태를 가지며, 상태의 변경에 따라 UI를 업데이트할 수 있는 위젯입니다. 사용자 입력, 데이터 변경 등에 대응하여 동적인 화면을 구성할 때 사용됩니다. StatefulWidget은 상태를 관리하는 State 클래스를 가지고 있습니다. State 클래스는 위젯의 생명주기와 함께 동작하여 상태의 변경 및 관리를 담당합니다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $counter'),
        ElevatedButton(
          onPressed: incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}
Dart
복사

Widget LifeCycle - 위젯 생명주기

위젯이 생성, 출력, 제거되는 일련의 과정

생명주기(LifeCycle)란? : 프로그래밍에서의 객체 또는 요소가 생성, 출력, 갱신, 소멸 되는 일련의 과정을 말합니다.

위젯은 크게 Stateless Widget 과 Stateful Widget 으로 나누어 볼 수 있는데, Stateless Widget 은 상태가 없기 때문에, 위젯에 들어있는 데이터가 변경되어 다시 갱신되는 일이 없습니다. 그렇기 때문에 Statetless Widget 의 UI 는 단순히 생성되고 출력되기만 하여 별다른 생명주기를 갖지 않습니다.

Stateful Wiget 위젯은 생성부터 출력 그리고 다시 상태에 따라 갱신되는 등, 일련의 생명주기를 갖습니다. 생명 주기의 과정을 쉽게 정리해보면 다음과 같습니다.

상태 생성

상태 초기화

의존에 의한 갱신

UI 출력

위젯 갱신

상태 갱신

위젯 비활성화

위젯 소멸

위젯 생명주기 요약

생명주기	메서드	설명
상태 생성	createState()	StatefulWidget의 상태를 생성하고 반환
상태 초기화	initState()	- 1번만 호출 - 초기 설정 및 데이터 요청 작업 수행
의존에 의한 갱신	didChangeDependencies()	initState() 이후에 호출되며, 해당 StatefulWidget이나 상위 위젯 트리에서 의존성이 변경될 때 호출
UI 출력	build()	표시할 위젯(UI)를 반환
위젯 갱신	didUpdateWidget()	위젯이 업데이트될 때 호출, 새로운 속성과 이전 속성을 비교하여 필요한 작업을 수행
상태 갱신	setState()	- 변경된 상태 통지 - UI를 갱신
위젯 비활성화	deactivate()	- 위젯이 트리에서 벗어나면 호출 - 비활성화 상태로 전환
위젯 소멸	dispose()	- 위젯이 제거될 때 호출 - 리소스를 해제하고 정리 작업을 수행

주요 생명주기 메소드

•

 initState()

•

 build()

•

 setState()

initState()

StatefulWidget 의 상태를 초기화하기 위해, 최초에 한 번만 호출되는 메소드

•

이 메서드는 한 번만 호출되며, 주로 초기화 작업이나 상태 변수 초기화 등을 수행합니다.

•

예를 들어, 특정 데이터를 가져오거나 초기 상태를 설정하는 데 사용됩니다.

- 상태 초기화 및 서버로의 데이터 요청 등의 코드를 작성합니다.

@override
void initState() {
  super.initState();
  // 초기화 작업 수행
  // ✅ 서버로의 데이터 요청
}
Dart
복사

build()

위젯의 레이아웃과 디자인을을 정의하는 메소드 - 화면에 UI 가 출력될 때 호출

•

이 메서드에서는 UI를 생성하고 반환하는 역할을 합니다.

•

build() 메서드는 상태가 변경될 때마다 호출되며, 변경된 상태에 따라 UI를 업데이트합니다.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: // UI 구성 요소들...
    ),
  );
}
Dart
복사

setState()

위젯의 상태를 변경시키고, UI를 갱신을 요청하는 메소드

이 메서드 내에서 상태 변수를 변경하고, 변경 후에 UI를 업데이트하고자 할 때 사용됩니다.

void _updateCounter() {
  setState(() {
    _counter++; // 상태 변수 변경
  });
}
Dart
복사

setState() 메서드 내부에서 새로운 상태로 업데이트된 변수를 사용하여 UI를 업데이트하면, Flutter는 변경된 상태에 따라 build() 메서드를 호출하여 화면을 다시 그립니다.