[플러터] 비동기 프로그래밍: Future, async/await, Stream 활용하기

비동기 프로그래밍은 모바일 애플리케이션 개발에서 매우 중요한 요소입니다. 사용자가 인터페이스와 상호작용하는 동안 백그라운드 작업이 수행될 수 있게 해 주어 사용자 경험을 향상할 수 있습니다.

 

비동기 프로그래밍이란?

비동기 프로그래밍은 시간이 오래 걸리는 작업(예: 네트워크 요청, 파일 읽기/쓰기 등)을 메인 스레드를 차단하지 않고 수행하는 프로그래밍 방식입니다. 이를 통해 애플리케이션은 사용자 입력에 즉각적으로 반응할 수 있습니다.

 

Dart의 Fluture와 async/await

Flutter는 Dart 언어를 사용합니다. Dart에서 비동기 프로그래밍을 지원하는 주요 기능은 'Future' 클래스와 'async/await' 구문입니다.

• Future: 미래의 어느 시점에 완료될 작업을 나타냅니다. 'Future' 객체는 완료되었을 때 값을 반환하거나 오류를 던질 수 있습니다.
• async/await: 비동기 코드를 작성할 때 동기 코드처럼 읽기 쉽게 만들어주는 구문입니다.

반응형

예제 코드

아래는 비동기 함수와 'Future'를 사용한 간단한 예제입니다. 이 예제에서는 네트워크 요청을 시뮬레이션합니다.

import 'package:flutter/material.dart';
import 'dart:async';

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: AsyncExample(),
        ),
      ),
    );
  }
}

class AsyncExample extends StatefulWidget {
  @override
  _AsyncExampleState createState() => _AsyncExampleState();
}

class _AsyncExampleState extends State<AsyncExample> {
  String _data = 'Fetching data...';

  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    // 3초 동안 대기하는 가짜 네트워크 요청 시뮬레이션
    await Future.delayed(Duration(seconds: 3));
    setState(() {
      _data = 'Data fetched!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(_data);
  }
}

위의 코드에서 '_fetchData' 함수는 'async'로 선언되었고, 'Future.delayed'를 사용하여 3초 동안 대기합니다. 그런 다음, 'setState'를 호출하여 상태를 업데이트합니다.

 

비동기 작업 처리하기

Dart의 'Future' 클래스는 비동기 작업을 처리하는 여러가지 방법을 제공합니다.

Future<void> _fetchData() {
  return Future.delayed(Duration(seconds: 3))
      .then((value) {
        setState(() {
          _data = 'Data fetched!';
        });
      })
      .catchError((error) {
        setState(() {
          _data = 'Error fetching data!';
        });
      })
      .whenComplete(() {
        print('Fetch complete');
      });
}

 

Stream을 사용한 데이터 스트림 처리

Fultter에서 'Stream'을 사용하여 데이터 스트림을 처리할 수도 있습니다. 이는 이벤트나 데이터의 지속적인 흐름을 처리하는 데 유용합니다.

Stream<int> _counterStream() async* {
  for (int i = 1; i <= 10; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

StreamBuilder<int>(
  stream: _counterStream(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else if (snapshot.hasData) {
      return Text('Count: ${snapshot.data}');
    } else {
      return Text('Done!');
    }
  },
)

 

결론

Flutter에서 비동기 프로그래밍은 'Future' 와 'Stream', 'async/await' 구문을 통해 쉽게 구현할 수 있습니다. 이를 통해 애플리케이션의 성능과 사용자 경험을 크게 향상할 수 있습니다.