Flutter의 비동기 프로그래밍(Asynchronous Programming) 사용법

비동기 프로그래밍은 Flutter 애플리케이션에서 사용자 경험을 개선하고 애플리케이션의 성능을 향상시키는 중요한 기법입니다. 비동기 프로그래밍을 통해 네트워크 요청, 파일 입출력 등의 작업을 효율적으로 처리할 수 있습니다. 이번 글에서는 Flutter에서 비동기 프로그래밍을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 비동기 프로그래밍의 개념

비동기 프로그래밍은 시간이 오래 걸리는 작업을 수행하는 동안 애플리케이션의 나머지 부분이 응답성을 유지하도록 하는 프로그래밍 방식입니다. Dart에서는 Future와 async/await 키워드를 사용하여 비동기 작업을 처리할 수 있습니다.

2. Future와 async/await

Future는 비동기 작업의 결과를 나타내는 객체입니다. async 키워드는 함수가 비동기 작업을 수행함을 나타내며, await 키워드는 비동기 작업이 완료될 때까지 기다립니다. 다음은 간단한 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AsyncExample(),
    );
  }
}

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

class _AsyncExampleState extends State<AsyncExample> {
  String _message = 'Loading...';

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

  Future<void> _loadData() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _message = 'Data loaded!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Async Example')),
      body: Center(
        child: Text(_message),
      ),
    );
  }
}

 

위 코드는 Future.delayed를 사용하여 2초 동안 지연된 후 메시지를 업데이트하는 예제입니다. await 키워드를 사용하여 지연 작업이 완료될 때까지 기다린 후 setState를 호출하여 UI를 업데이트합니다.

3. 네트워크 요청 처리

비동기 프로그래밍은 네트워크 요청을 처리할 때 매우 유용합니다. http 패키지를 사용하여 비동기 네트워크 요청을 수행하는 예제를 살펴보겠습니다.

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

class NetworkExample extends StatefulWidget {
  @override
  _NetworkExampleState createState() => _NetworkExampleState();
}

class _NetworkExampleState extends State<NetworkExample> {
  String _message = 'Loading...';

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

  Future<void> _fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      setState(() {
        _message = data['title'];
      });
    } else {
      setState(() {
        _message = 'Failed to load data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Network Example')),
      body: Center(
        child: Text(_message),
      ),
    );
  }
}

 

위 코드는 http.get 메서드를 사용하여 네트워크 요청을 수행하고, 서버로부터 받은 데이터를 화면에 표시하는 예제입니다. await 키워드를 사용하여 네트워크 요청이 완료될 때까지 기다린 후, setState를 호출하여 UI를 업데이트합니다.

 

 

반응형

 

 

4. 병렬 작업 수행

비동기 프로그래밍을 사용하여 여러 작업을 병렬로 수행할 수 있습니다. Future.wait를 사용하여 여러 Future 객체를 병렬로 실행하고, 모든 작업이 완료될 때까지 기다리는 예제를 살펴보겠습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ParallelExample(),
    );
  }
}

class ParallelExample extends StatefulWidget {
  @override
  _ParallelExampleState createState() => _ParallelExampleState();
}

class _ParallelExampleState extends State<ParallelExample> {
  String _message = 'Loading...';

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

  Future<void> _loadData() async {
    final results = await Future.wait([
      Future.delayed(Duration(seconds: 2), () => 'Result 1'),
      Future.delayed(Duration(seconds: 3), () => 'Result 2'),
    ]);

    setState(() {
      _message = '${results[0]}, ${results[1]}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Parallel Example')),
      body: Center(
        child: Text(_message),
      ),
    );
  }
}

 

위 코드는 Future.wait를 사용하여 두 개의 비동기 작업을 병렬로 수행하고, 모든 작업이 완료된 후 결과를 화면에 표시하는 예제입니다. 두 작업은 각각 2초와 3초 동안 지연된 후 결과를 반환합니다.

 

728x90

 

 

5. Stream 사용

Stream은 여러 비동기 이벤트를 처리할 때 유용합니다. Stream을 사용하여 데이터를 비동기적으로 처리하는 예제를 살펴보겠습니다.

 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StreamExample(),
    );
  }
}

class StreamExample extends StatefulWidget {
  @override
  _StreamExampleState createState() => _StreamExampleState();
}

class _StreamExampleState extends State<StreamExample> {
  late StreamController<int> _streamController;
  late Stream<int> _stream;
  String _message = 'No data';

  @override
  void initState() {
    super.initState();
    _streamController = StreamController<int>();
    _stream = _streamController.stream;
    _startStream();
  }

  void _startStream() {
    int counter = 0;
    Timer.periodic(Duration(seconds: 1), (timer) {
      _streamController.add(counter++);
      if (counter > 5) {
        timer.cancel();
        _streamController.close();
      }
    });
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stream Example')),
      body: Center(
        child: StreamBuilder<int>(
          stream: _stream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Counter: ${snapshot.data}');
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Waiting for data...');
            }
          },
        ),
      ),
    );
  }
}

 

 

위 코드는 StreamController와 StreamBuilder를 사용하여 비동기적으로 데이터를 처리하는 예제입니다. Timer.periodic을 사용하여 1초마다 스트림에 새로운 값을 추가하고, StreamBuilder를 사용하여 스트림의 데이터를 화면에 표시합니다.

결론

Flutter 애플리케이션에서 비동기 프로그래밍을 사용하면 네트워크 요청, 파일 입출력 등의 작업을 효율적으로 처리할 수 있습니다. Future와 async/await, Future.wait, Stream을 사용하여 다양한 비동기 작업을 구현하는 방법을 통해 비동기 프로그래밍을 효과적으로 활용할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 비동기 프로그래밍을 효율적으로 사용해보세요. 비동기 프로그래밍을 통해 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선할 수 있습니다.