예제로 배우는 Dart & Flutter 시작하기 ⑦ - 비동기 프로그래밍 완전 정복 (Future & async/await)

예제로 배우는 Dart & Flutter 시작하기 ⑦ - 비동기 프로그래밍 완전 정복 (Future & async/await)

현대 앱 개발에서 비동기 프로그래밍은 선택이 아닌 필수입니다.
Flutter 앱에서 사용자 경험을 저해하지 않고 네트워크 요청, 파일 읽기, DB 작업 등을 수행하려면 **Dart의 비동기 처리 방식(Future, async, await)**을 정확히 이해해야 합니다.

이번 글에서는 실전 중심의 예제를 통해 Dart에서 비동기 코드를 작성하고 처리하는 방법을 배워봅니다.

---

📌 1. 비동기 프로그래밍이란?

비동기(async) 프로그래밍은 작업이 완료될 때까지 기다리지 않고, 다음 작업을 수행할 수 있는 구조입니다.

• 대표적인 예:
  • API 호출
  • 파일 읽기/쓰기
  • 타이머, 알림
  • DB 쿼리

---

📌 2. Future란?

Future는 미래에 완료될(또는 실패할) 작업을 나타냅니다.

Future<String> fetchData() {
  return Future.delayed(Duration(seconds: 2), () {
    return '서버에서 받아온 데이터';
  });
}

위 코드는 2초 후에 '서버에서 받아온 데이터'를 반환합니다.

---

📌 3. async / await 사용법

✅ 기본 예제

Future<void> main() async {
  print('데이터 요청 중...');
  String result = await fetchData();
  print('결과: $result');
}

실행 결과:

데이터 요청 중...
(2초 후)
결과: 서버에서 받아온 데이터

• async: 해당 함수 내부에서 await를 사용할 수 있게 해줌
• await: Future가 완료될 때까지 기다림

---

📌 4. 예외 처리 try-catch-finally

반응형

비동기 코드에서도 예외 처리를 해야 앱이 튕기지 않습니다.

Future<void> main() async {
  try {
    String data = await fetchDataWithError();
    print(data);
  } catch (e) {
    print('에러 발생: $e');
  } finally {
    print('작업 완료');
  }
}

Future<String> fetchDataWithError() async {
  await Future.delayed(Duration(seconds: 1));
  throw Exception('서버 오류 발생!');
}

실행 결과:

에러 발생: Exception: 서버 오류 발생!
작업 완료

---

📌 5. 실제 API 요청 예제 (HTTP 요청)

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

Future fetchWeather() async {
  final url = Uri.parse('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY&units=metric');
  final response = await http.get(url);

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print('현재 기온: ${data["main"]["temp"]}°C');
  } else {
    print('에러 발생: ${response.statusCode}');
  }
}

pubspec.yaml에 http 패키지를 추가해 주세요.

dependencies:
  http: ^0.13.5

---

📌 6. Future.then() vs async/await 비교

✅ Future.then() 방식

fetchData().then((value) {
  print('then 방식 결과: $value');
}).catchError((e) {
  print('에러 발생: $e');
});

✅ async/await 방식

void printData() async {
  try {
    var data = await fetchData();
    print('await 방식 결과: $data');
  } catch (e) {
    print('에러 발생: $e');
  }
}

가독성과 유지보수를 위해 async/await 사용을 추천합니다.

---

📌 7. 실전 예제: 타이머 기능 구현하기

Future<void> startCountdown(int seconds) async {
  for (int i = seconds; i > 0; i--) {
    print('$i초 남음...');
    await Future.delayed(Duration(seconds: 1));
  }
  print('타이머 종료!');
}

void main() {
  startCountdown(5);
}

---

📌 8. 비동기 함수 안에서 동기 코드 실행 주의

void syncLoop() {
  for (int i = 0; i < 5; i++) {
    print('동기 반복: $i');
  }
}

Future<void> main() async {
  print('시작');
  syncLoop();               // 동기 함수 → 즉시 실행
  await fetchData();        // 비동기 함수 → 기다림
  print('끝');
}

---

📌 9. 이번 글에서 배운 내용

• Dart의 비동기 처리 구조(Future, async, await) 이해
• try-catch로 비동기 예외 처리하는 방법
• 실제 API 호출 예제 실습
• 타이머, 반복, then 체인 vs await 비교

---

📌 10. 다음 글 예고

다음 글에서는 드디어 Flutter 프로젝트를 생성하고, 실제로 Dart를 활용하여 UI를 구성해봅니다.
지금까지 배운 Dart 문법을 Flutter 앱 코드에 어떻게 활용할 수 있는지 실습합니다.

• 다음 글 제목:
  『예제로 배우는 Dart & Flutter 시작하기 ⑧ - Flutter 첫 앱 만들기 (Counter App 실습)』

---

 

Dart 비동기 프로그래밍,Dart Future 예제,Dart async await,Dart 예외 처리,Dart API 요청,Dart 타이머 기능,Dart Flutter 네트워크,Dart Future vs then,Dart try catch 예제,Dart Flutter 데이터 처리