flutter - StatefulWidget, StatelessWidget

StatefulWidget과 StatelessWidget에 대해 알아보자

StatefulWidget

플러터에는 두 종류의 위젯이 있다. 하나는 StatelessWidget이고, 다른 하나는 StatefulWidget이다. StatefulWidget은 말 그대로 '상태가 있는 위젯'이란 뜻이다. 이제 이 '상태'가 뭔지 좀 더 알아보자.

상태(State)란?
'상태'는 위젯이 기억하고 있는 정보다. 예를 들어, 게임을 하다가 일시정지 버튼을 누르면, 게임은 당신이 어디까지 진행했는지 '상태'를 기억해야 한다. 이렇게 '상태'를 기억할 수 있는 위젯이 바로 StatefulWidget이다.

StatefulWidget의 특징
변할 수 있는 데이터: StatefulWidget은 변할 수 있는 데이터를 가지고 있다. 예를 들어, 타이머 위젯은 시간이 변할 때마다 화면에 보여주는 숫자가 바뀐다.

동적인 인터페이스: 사용자가 앱과 상호작용할 때, 화면에 보이는 것들이 바뀔 수 있다. 예를 들어, 버튼을 누르면 색이 바뀌거나, 텍스트가 업데이트되는 것처럼.
setState: StatefulWidget에서는 setState라는 함수를 사용해서 상태를 바꿀 수 있다. 이 함수를 사용하면, 플러터가 위젯의 상태가 바뀌었다는 걸 알고 화면을 다시 그려준다.

예제: 카운터 위젯 간단한 카운터 위젯을 예로 들어보자. 이 카운터는 버튼을 누를 때마다 숫자가 올라간다.

class MyCounterWidget extends StatefulWidget {
  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('카운터: $counter'),
        RaisedButton(
          onPressed: incrementCounter,
          child: Text('증가'),
        ),
      ],
    );
  }
}

이 코드에서 MyCounterWidget은 StatefulWidget이다.
카운터의 값인 counter는 상태로, incrementCounter 함수를 통해 증가시킬 수 있다.
사용자가 '증가' 버튼을 누르면 setState가 호출되고, counter가 증가한다.
그리고 플러터가 화면을 다시 그려서 새로운 counter 값을 보여준다.

StatelessWidget

StatelessWidget은 '상태가 없는 위젯'이다.
이 말은 StatelessWidget이 한 번 만들어지면 바뀌지 않는다는 뜻이다.
사용자가 앱과 상호작용하더라도 StatelessWidget은 변하지 않는다.

상태(State)가 없다는 것은?
상태가 없다는 것은 StatelessWidget이 앱이 실행되는 동안 정보를 변경하거나 저장하지 않는다는 것을 의미한다. 예를 들어, 텍스트를 보여주는 위젯이나 아이콘을 표시하는 위젯처럼, 한 번 설정되면 변하지 않는 것들이 이에 속한다.

StatelessWidget의 특징
불변성(Immutability): 한 번 만들어진 후에는 내부 상태가 바뀌지 않는다.
단순성(Simplicity): 상태를 관리할 필요가 없어서 구현하기 쉽고, 오류가 발생할 가능성이 적다.
성능(Performance): 상태 변경에 대한 걱정이 없기 때문에, 성능 면에서도 좋다.


예제: 텍스트 위젯
간단한 StatelessWidget 예제로 텍스트를 보여주는 위젯을 만들어보자.

class MyTextWidget extends StatelessWidget {
  final String text;

  MyTextWidget(this.text);

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

void main() {
  runApp(MyTextWidget('안녕!'));
}

이 코드에서 MyTextWidget은 StatelessWidget이다.
생성자를 통해 전달된 text 값은 변경되지 않는다. build 함수에서는 단순히 이 text를 화면에 표시한다.
StatelessWidget은 이렇게 간단하고 변하지 않는 UI를 만들 때 주로 사용한다.