본문 바로가기
Category/Flutter

[Flutter] StatelessWidget, StatefulWidget

by Corinee 2024. 11. 1.
728x90
반응형

Flutter에서 StatelessWidgetStatefulWidget은 애플리케이션 UI를 구성하는 기본 빌딩 블록입니다. 이 두 가지는 서로 다르게 작동하며, 개발자가 앱의 UI 상태를 어떻게 관리할지 결정할 때 중요하게 사용됩니다.

1. StatelessWidget:

  • 설명: StatelessWidget은 변경되지 않는 고정된 상태의 위젯입니다. 한 번 렌더링된 후에는 상태가 변하지 않기 때문에 UI는 고정된 상태를 유지합니다.
  • 사용 예시: 단순한 텍스트, 아이콘, 버튼 등 상태가 필요 없는 요소들.
  • 예제 코드:
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}

2. StatefulWidget:

  • 설명: StatefulWidget은 상태가 변경될 수 있는 위젯입니다. 내부 상태가 바뀌면 setState()를 호출하여 UI를 다시 렌더링할 수 있습니다.
  • 사용 예시: 사용자의 입력, 애니메이션, 카운터 등 동적으로 업데이트되는 UI 요소들.
  • 예제 코드:
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 Column(
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

차이점 요약:

  • StatelessWidget은 상태를 가지지 않기 때문에 속도와 성능 면에서 더 가볍습니다.
  • StatefulWidget은 상태가 변화할 수 있고 setState()를 통해 UI를 업데이트할 수 있습니다.

어떤 위젯을 사용할지 결정할 때는 UI가 동적이고 변경 가능한지를 고려하면 됩니다.