👨‍💻 [Flutter] Flutter 에서 StatefulWidget 은 무엇인가요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter 에서 StatefulWidget 은 무엇인지 간략히 알아보았습니다.

---

질문 >

Flutter 에서 StatefulWidget 은 무엇인가요?

답변 >

StatefulWidget은 Flutter에서 상태가 변하는 위젯을 만들 때 사용하는 위젯 클래스입니다. Flutter에서 UI의 상태나 데이터가 변경될 때마다 화면을 다시 그려야 할 때, StatefulWidget을 사용하여 이를 구현할 수 있습니다.

StatefulWidget의 구조와 특징

StatefulWidget은 두 개의 클래스로 구성됩니다:

1. StatefulWidget 클래스: 위젯의 상태가 변할 수 있음을 정의하는 기본 클래스입니다.
2. State 클래스: 위젯의 실제 상태와 UI를 관리합니다. 이 클래스에서 UI의 상태 변화와 관련된 로직을 구현합니다.

StatefulWidget은 아래와 같은 경우에 유용합니다.

1. 상태가 변하는 데이터:
   • 사용자 입력이나 애니메이션처럼 시간이 지나면서 상태가 바뀌어야 하는 위젯을 만들 때 사용됩니다. 예를 들어, 버튼을 눌렀을 때 텍스트가 변경되거나, 숫자가 증가하는 등의 UI가 필요할 때 적합합니다.
2. State 클래스:
   • StatefulWidget은 기본적으로 한 번만 생성되지만, State 클래스는 위젯이 다시 빌드될 때마다 새로운 상태를 유지합니다. State 클래스에서 상태가 변경될 때 setState() 메서드를 호출하여 UI를 업데이트합니다.
3. setState() 메서드:
   • StatefulWidget에서 UI를 업데이트하기 위해서는 setState() 메서드를 사용해야 합니다. 이 메서드를 호출하면 build() 메서드가 다시 호출되어 변경된 상태를 기반으로 화면을 새로 렌더링합니다.

StatefulWidget의 예제

아래는 버튼을 눌렀을 때 숫자가 증가하는 간단한 StatefulWidget 예제입니다.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  // 버튼을 누를 때마다 호출되는 메서드
  void _incrementCounter() {
    setState(() {
      _counter++; // 상태를 업데이트
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StatefulWidget Example'),
      ),
      body: 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,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 버튼 클릭 시 메서드 호출
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

이 예제에서는 다음과 같은 구조로 StatefulWidget을 활용합니다.

1. CounterWidget 클래스는 StatefulWidget을 정의하는 클래스입니다.
2. _CounterWidgetState 클래스는 State 클래스로, 위젯의 상태를 관리하고 UI를 정의합니다.
3. _counter라는 변수를 상태로 정의하고, setState() 메서드를 통해 상태를 변경하면서 UI를 업데이트합니다.

언제 StatefulWidget을 사용해야 할까?

• 사용자 상호작용이 있는 경우: 버튼 클릭, 텍스트 입력 등 사용자 상호작용에 따라 UI가 변경될 때 사용합니다.
• 애니메이션 효과: 움직이는 UI, 시간에 따라 변경되는 요소가 필요한 경우.
• 데이터 업데이트가 필요한 경우: API로 데이터를 가져오거나 시간이 지남에 따라 변경되는 데이터를 표시해야 할 때.

StatefulWidget과 StatelessWidget의 차이점

• StatefulWidget은 상태가 변할 수 있고, 변경될 때마다 화면이 업데이트됩니다.
• StatelessWidget은 고정된 UI로 상태가 변하지 않으므로 다시 빌드되지 않습니다.

결론적으로, StatefulWidget은 동적이고 상호작용적인 Flutter UI를 구축하는 데 유용하며, UI의 상태가 변할 필요가 있을 때 적합한 위젯입니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---