Flutter에서 Stateful과 Stateless Widget

소개

Flutter에서 Widget은 화면에 그려지는 모든 요소를 말합니다. Widget은 두 가지 종류가 있습니다. 바로, Stateful Widget과 Stateless Widget입니다.

Stateless Widget

Stateless Widget은 상태가 없는 위젯으로, 한 번 그려지면 내부 상태가 변경되지 않습니다. 즉, 화면에 그려진 이후에는 어떠한 변경도 일어나지 않습니다. 이러한 Stateless Widget은 다음과 같이 작성됩니다.

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("Stateless Widget Example"),
    );
  }
}

위의 코드에서는 StatelessWidget을 상속받은 MyStatelessWidget 클래스를 정의하고 있습니다. build() 메소드에서는 화면에 그려질 Container 위젯과 그 안에 있는 Text 위젯을 반환합니다.

Stateful Widget

Stateful Widget은 상태를 가지는 위젯으로, 내부 상태가 변경될 때마다 다시 그려집니다. 이러한 Stateful Widget은 다음과 같이 작성됩니다.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text("Stateful Widget Example"),
          Text("$_counter"),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text("Increment"),
          ),
        ],
      ),
    );
  }
}

위의 코드에서는 StatefulWidget을 상속받은 MyStatefulWidget 클래스와 이 클래스의 내부 상태를 관리하는 _MyStatefulWidgetState 클래스를 정의하고 있습니다. _MyStatefulWidgetState 클래스에서는 _counter 변수를 정의하고, 이를 증가시키는 _incrementCounter() 메소드를 정의하고 있습니다. build() 메소드에서는 화면에 그려질 Column 위젯과 그 안에 있는 Text 위젯, ElevatedButton 위젯을 반환합니다. ElevatedButton 위젯은 _incrementCounter() 메소드를 호출하여 _counter 변수를 증가시킵니다. 이때, setState() 메소드를 사용하여 내부 상태를 변경하고, 화면을 다시 그리도록 합니다.

차이점

Stateless Widget과 Stateful Widget의 가장 큰 차이점은 위젯 내부 상태의 유무입니다. Stateless Widget은 내부 상태가 없으므로 한 번 그려진 이후에는 화면이 변경되지 않습니다. 반면, Stateful Widget은 내부 상태가 있으므로 내부 상태가 변경될 때마다 화면이 다시 그려집니다. 이러한 차이점으로 인해, Stateful Widget은 내부 상태를 관리하기 위한 추가적인 코드가 필요합니다. 또한, 내부 상태가 변경될 때마다 화면을 다시 그리기 때문에 성능상의 이슈가 발생할 수 있습니다.

이렇게 Flutter에서는 Stateless Widget과 Stateful Widget을 사용하여 화면을 구성합니다. 적절한 위젯을 선택하여 내부 상태를 관리하고, 성능을 최적화하면서 UI를 구성해야 합니다.