Flutter Asynchronous

Flutter 비동기 / Flutter Asynchronous

Flutter에서 비동기 프로그래밍은 네트워크 요청, 파일 읽기/쓰기, 데이터베이스 쿼리 등 시간이 오래 걸리는 작업을 수행할 때 중요한 개념입니다. Dart에서는 Future와 async/await 키워드를 사용하여 비동기 프로그래밍을 쉽게 할 수 있습니다. 다음은 Flutter에서 비동기 프로그래밍을 사용하는 방법에 대한 설명과 예제입니다.

Future와 async/await

Dart의 Future는 나중에 완료될 작업을 나타내는 객체입니다. async 키워드를 사용하여 비동기 함수를 정의하고, await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다.

예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Async Example')),
        body: Center(
          child: FutureBuilder<String>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Text('Data: ${snapshot.data}');
              }
            },
          ),
        ),
      ),
    );
  }

  Future<String> fetchData() async {
    // 네트워크 요청 시뮬레이션 (예: 2초 대기)
    await Future.delayed(Duration(seconds: 2));
    return 'Hello, World!';
  }
}

이 예제에서는 fetchData 함수가 비동기 함수로 정의되어 있습니다. FutureBuilder 위젯을 사용하여 fetchData의 결과를 기다리고, 결과가 준비되면 UI를 업데이트합니다.

비동기 데이터 로딩

네트워크 요청을 통해 데이터를 비동기로 로드하는 예제를 살펴보겠습니다.

예제

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Network Request Example')),
        body: Center(
          child: FutureBuilder<Map<String, dynamic>>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Text('Title: ${snapshot.data?['title']}');
              }
            },
          ),
        ),
      ),
    );
  }

  Future<Map<String, dynamic>> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load data');
    }
  }
}

이 예제에서는 http 패키지를 사용하여 네트워크 요청을 보내고 JSON 데이터를 비동기로 로드합니다. FutureBuilder를 사용하여 요청 결과를 기다리고, 데이터를 UI에 표시합니다.

async/await를 사용한 비동기 작업 체인

여러 비동기 작업을 연속적으로 수행해야 할 경우, async/await를 사용하여 코드를 간단하게 만들 수 있습니다.

예제

Future<void> performTasks() async {
  await task1();
  await task2();
  await task3();
}

Future<void> task1() async {
  await Future.delayed(Duration(seconds: 1));
  print('Task 1 completed');
}

Future<void> task2() async {
  await Future.delayed(Duration(seconds: 2));
  print('Task 2 completed');
}

Future<void> task3() async {
  await Future.delayed(Duration(seconds: 3));
  print('Task 3 completed');
}

void main() {
  performTasks();
}

이 예제에서는 세 개의 비동기 작업(task1, task2, task3)을 순차적으로 수행합니다. performTasks 함수는 각 작업이 완료될 때까지 기다립니다.

결론

Flutter에서 비동기 프로그래밍을 사용하면 사용자 인터페이스가 블로킹되지 않고, 네트워크 요청이나 파일 읽기/쓰기와 같은 시간이 오래 걸리는 작업을 효율적으로 처리할 수 있습니다. Dart의 Future와 async/await 키워드는 비동기 프로그래밍을 쉽게 구현할 수 있게 해줍니다. 이를 통해 사용자 경험을 향상시키고, 반응성이 뛰어난 애플리케이션을 개발할 수 있습니다.