오늘 이시간에는 Future를 UI로 표현하는 방법에 대해서 알아보았습니다.

StatefulWidget + setState()

StatefulWidget은 변경 가능한 상태를 가지는 위젯입니다.

이러한 위젯은 State 클래스와 함께 사용됩니다. State 클래스는 StatefulWidget과 관련된 데이터와 로직을 관리합니다. 상태를 변경할 때는 setState() 메서드를 사용하여 State 객체를 업데이트하고 UI를 다시 빌드합니다.

일반적으로 데이터를 비동기적으로 가져오거나 변경해야 하는 경우에 사용됩니다. 예를 들어, 사용자가 버튼을 클릭하면 백엔드 서버에서 데이터를 가져와 UI를 업데이트해야 할 때 사용할 수 있습니다. 이 경우, setState() 메서드 내에서 Future나 async/await와 같은 비동기 작업을 수행하여 데이터를 가져오고, 가져온 데이터를 사용하여 State 객체를 업데이트하고 UI를 다시 빌드합니다.

StatelessWidget + FutureBuilder

StatelessWidget은 변경 불가능한 상태를 가지는 위젯입니다. 이러한 위젯은 주로 정적인 콘텐츠를 표시하거나, 부모 위젯으로부터 전달받은 데이터를 표시해야 할 때 사용됩니다. State 클래스 없이도 사용할 수 있습니다.

비동기 작업을 처리해야 할 때는 FutureBuilder 위젯을 사용할 수 있습니다. FutureBuilder는 Future 객체의 완료 여부에 따라 다른 UI를 표시할 수 있도록 도와줍니다. FutureBuilder는 future 매개변수를 통해 Future 객체를 받아옵니다. Future 객체가 완료되면 builder 함수가 호출되고, 그 결과에 따라 다른 UI를 반환합니다.

FutureBuilder를 사용하면 Future 객체의 상태에 따라 로딩 중, 에러, 완료 등의 상태에 맞는 UI를 쉽게 구성할 수 있습니다. 예를 들어, 데이터를 가져오는 동안 로딩 스피너를 표시하고, 데이터를 성공적으로 가져오면 데이터를 표시하고, 에러가 발생하면 에러 메시지를 표시하는 등의 작업을 할 수 있습니다.

요약하면, StatefulWidget과 setState()를 사용하면 변경 가능한 상태를 가지며, 비동기 작업을 수행하여 상태를 업데이트하고 UI를 다시 빌드할 수 있습니다. StatelessWidget과 FutureBuilder를 사용하면 변경 불가능한 상태를 가지며, 비동기 작업의 완료 여부에 따라 다른 UI를 표시할 수 있습니다.

setState() 다시 한번 더 공부하기

**setState()**는 상태(State)를 변경하고 UI를 다시 그리는 메소드입니다. **setState()**를 호출하면 해당 위젯의 상태가 업데이트되고, Flutter 프레임워크는 변경된 상태를 감지하여 관련된 위젯들을 다시 렌더링합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 예시',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 예시'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String _text = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          _text,
          style: TextStyle(fontSize: 24),
        ),
        FloatingActionButton(
          onPressed: () => setState(() => _text = 'Hello World!'),
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}

**MyApp**의 build() 메소드에서는 Scaffold 위젯을 생성하고, **MyWidget**을 Center 위젯 내에 배치합니다. 그리고 **MyWidget**의 build() 메소드에서는 텍스트 위젯과 플로팅 액션 버튼을 직접 반환하게 됩니다.

코드를 실행하면 앱이 시작될 때는 빈 텍스트가 표시되고, 버튼을 누를 때마다 "Hello World!"라는 문구가 텍스트 위젯에 표시됩니다.