StatefulWidget & StatelessWidget

Flutter에서 상태 관리 방식에 따른 Flutter 위젯 선택: StatefulWidget과 StatelessWidget

Flutter에서 위젯은 두 가지 주요 유형으로 구분됩니다: StatefulWidget과 StatelessWidget두 유형 모두 UI를 정의하는 데 사용되지만, 상태 관리 방식에서 중요한 차이점이 있습니다.

주요 속성

StatelessWidget

• 정의: 상태가 없는 위젯입니다. 주어진 입력 데이터에 따라 화면을 그립니다.
• 상태: 자체적으로 상태를 관리하지 않으며, 변하지 않는 데이터를 기반으로 UI를 빌드합니다.
• 재빌드: 위젯이 생성될 때 한 번만 빌드됩니다.

StatefulWidget

• 정의: 상태가 있는 위젯입니다. 상태를 관리하고, 상태가 변경될 때마다 UI를 업데이트합니다.
• 상태: 내부 상태를 관리하며, 이 상태는 위젯의 생명 주기 동안 변경될 수 있습니다.
• 재빌드: 상태가 변경될 때마다 빌드 메서드를 다시 호출하여 UI를 업데이트합니다.

주요 활용도

StatelessWidget

• 고정된 데이터 표시: 상태가 변하지 않는 경우 사용합니다. 예를 들어, 단순한 텍스트나 아이콘을 표시할 때 사용합니다.
• 단순한 UI 요소: 복잡한 상태 관리가 필요 없는 UI 요소에 적합합니다.

StatefulWidget

• 상태 관리 필요: 사용자의 입력이나 애니메이션 등으로 인해 UI가 변경되어야 할 때 사용합니다.
• 동적 데이터: 사용자와의 상호작용에 따라 변경되는 데이터를 표시할 때 적합합니다.

코드 예제

StatelessWidget 예제

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('I am a stateless widget'),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Stateless Widget Example')),
      body: MyStatelessWidget(),
    ),
  ));
}

StatefulWidget 예제

import 'package:flutter/material.dart';

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 Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('You have pushed the button this many times:'),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Stateful Widget Example')),
      body: MyStatefulWidget(),
    ),
  ));
}

추가 팁

• 올바른 위젯 유형 선택: 상태가 없는 경우에는 StatelessWidget을 사용하고, 상태 관리가 필요한 경우에는 StatefulWidget을 사용합니다.
• 상태 관리 최적화: StatefulWidget을 사용할 때는 상태 변경이 필요한 부분만 최소화하여 성능을 최적화합니다.

관련 자료

• StatelessWidget: StatelessWidget 클래스의 공식 문서입니다.
• StatefulWidget: StatefulWidget 클래스의 공식 문서입니다.
• State: State 클래스의 공식 문서입니다.