[Flutter] Stateless Widget / Stateful Widget

앱 생명 주기의 생성, 렌더링, 업데이트 및 종료 방식을 알아야지 앱 생명 주기를 기반으로 코드를 이해하는 데 도움이 된다.

 

Flutter의 모든 것이 Widget으로 이루어져 있어 생명 주기에 앞서 Flutter의 Widget에 대해 알아보자.

Widget

Flutter에는 크게 2가지 유형의 위젯이 있다.

Stateless Widget

Stateless Widget은 런타임에 크게 변경되지 않는 위젯이다. 그렇기 때문에 상태(State)를 다룰 필요가 없으며, 영구적으로 변하지 않는 변수, 버튼, 심볼 등과 같은 표현 요소를 나타내거나 앱에서 데이터를 가져오는 데에 쓰인다.

이러한 위젯은 build 메서드를 오버라이드하여 위젯을 반환한다. Stateless 위젯은 UI가 데이터의 변경에 의존하지 않는 경우 사용하면 좋다.

따라서 부모 위젯으로부터 전달받은 값이 변경이 되면 위젯이 rebuild되어 화면을 갱신하게 된다. 이 때, Constructor와 build가 다시 실행되게 된다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

Stateful Widget

Stateful Widget은 UI에 표현되는 데이터가 앱의 실행 중에 동적으로 변할 수 있는 위젯이다. Stateful Widget은 상태(State)를 가지고 있으며, 상태의 변화에 따라 UI가 변화한다. 상태를 가지기 때문에 앱 실행 도중에 여러 번 그려질 수 있다.

상태를 가지는 위젯은 사용자의 입력이나 앱 내부에서 발생하는 이벤트 등에 따라 UI를 업데이트해야 할 때 주로 사용된다.

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();
  }
}

 

 

StatefulWidget은 Widget 클래스를 상속받으며, State 클래스는 StatefulWidget과 한 쌍을 이루어 상태를 관리하고 UI를 업데이트하는 역할을 수행한다.

 

StatefulWidget

StatefulWidget은 Widget 클래스를 상속받는 위젯이다. 하지만 StatefulWidget 자체는 가변적인 상태를 가지지 않으며, State 객체에게 상태 관리를 위임한다. StatefulWidget은 createState() 메서드를 통해 새로운 State 객체를 생성하고 연결한다.

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key? key }) : super(key: key);

  @override
  StatefulElement createElement() => StatefulElement(this);

  @protected
  @factory
  State createState();
}

 

State

State 클래스는 StatefulWidget과 함께 동작하여 위젯의 가변적인 상태를 관리하고 UI를 업데이트한다. State 객체는 StatefulWidget과 한 쌍을 이루며, UI를 구성하는 build 메서드를 오버라이드하여 위젯의 모습을 정의한다. State 객체는 StatefulWidget의 상태를 변화시키고, 변경된 상태에 따라 setState() 메서드를 호출하여 UI를 다시 그려 화면을 업데이트한다.

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter Value:',
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위의 예시에서 CounterApp은 StatefulWidget이고, _CounterAppState는 해당 State 객체이다.

StatefulWidget인 CounterApp과 State 객체인 _CounterAppState가 함께 동작하여 카운터 앱의 상태를 관리하고 UI를 업데이트한다. 상태가 변경될 때마다 _CounterAppState의 build 메서드가 호출되어 UI가 갱신된다.

 

 

다음은 Flutter로 Lifecycle을 살펴보는 포스팅을 할 예정이다 많관부~ 😋

 

📎 참고 링크

App Lifecycle In Flutter