본문 바로가기
모바일 공부/Flutter

future , async , await

by chogigang 2024. 5. 17.

flutter로 앱을 만들다 보면 심심치 않게 보이는 구문이 있습니다  future , async , await  이 3명의 친구들입니다

 

이 친구들은 바로 비동기 프로그램을 사용될 때 쓰이는 친구들입니다 

 

비동기 프로그램은 뭔가? 

  • 동기란 C언어, C++과 같이 모든 동작을 차례대로 완료 후 수행하는 것
  • 비동기란 어떤 동작이 완료가 되지 않아도 다음 동작을 수행하는 것

이렇게 적어도 뭔소리인지 잘 못 알아듣겠다 하면 쉬운 예제로 

 

동기 : 요리를 하면서 파스타 하나만 계속 요리해서 완성하고 다른 요리 시작하는 것이 동기

비동기:  파스타 면 삶고 소스 끓이고, 고기 굽고 동시에 하는것을 비동기입니다 어떤 동작이 완료되지 않아도 다른 것들을 수행하는 것

비동기 코드는 왜 중요한가?

비동기 작업을 사용하면 다른 작업이 완료되기를 기다리는 동안 프로그램이 작업을 완료할 수 있습니다. 다음은 자주 사용되는 비동기 작업입니다:

  • 네트워크를 통해 데이터를 가져올 때.
  • 데이터 베이스에 쓰기를 수행할 때.
  • 파일로부터 데이터를 읽을 때.

이와 같은 비동기 작업은 결과를 보통 Future로 제공하고, 결과가 다수의 파트를 가지고 있다면 Stream으로 제공합니다. 이러한 작업들은 프로그램에 비동기성을 도입합니다. 이 비동기성을 다루기 위해서 다른 일반적인 Dart 함수들도 비동기화되어야 합니다.

이러한 비동기 결과와 상호작용하려면 async와 await 키워드를 사용하면 됩니다. 대부분의 비동기 함수들은 본질적으로 비동기 연산에 의존하는 비동기 Dart 함수입니다.

 

Future란 무엇인가

Dart에서의 Future는 자바스크립트에서의 Promise에 대응됩니다. Future와 Promise는 모두 싱글스레드 환경에서 비동기 처리를 위해 존재합니다.

  • JS의 Promise는 특정 동작의 수행이 완료되면 다음 동작을 수행하겠다는 약속
  • Dart의 Future는 지금은 없지만 미래에 요청한 데이터 혹은 에러가 담길 그릇 

 

예를 들어서 키오스크에서 음식을 주문하고 주문번호 종이를 받고 기다리는 것과 똑같습니다. Future를 선언하고 내가 무슨 타입으로 받을지 지정한 다음 차례가 되면 해당 타입의 요소를 받는 것입니다. 

 

예제 1

import 'dart:async';

Future<int> futureNumber() {
  // 3초 후 100이 상자에서 나옵니다
  return Future<int>.delayed(Duration(seconds: 3), () {
    return 100;
  });
}

void main() {
  // future 라는 변수에서 미래에(3초 후에) int가 나올 것입니다
  Future<int> future = futureNumber();

  future.then((val) {
    // int가 나오면 해당 값을 출력
    print('val: $val');
  }).catchError((error) {
    // error가 해당 에러를 출력
    print('error: $error');
  });

  print('기다리는 중');
}

 

 

결과

 

기다리는 중
val: 100

 

 

futureNumber 함수는 3초가 되기 전까지는 닫혀있다가 3초가 되면 100이 나오는 상자 Future <int>를 return 하면서

그다음 실행문인 print 함수를 만나 먼저 출력하고 3초 뒤에 Future로 지정한 함수가 출력됩니다. 

 

 

 

async , await 

아까 예를 음식을 요리하는 요리사로 비유했습니다

하나의 음식을 다 만들고 다음 요리로 넘어가는 동기  => Synchronus

하나의 음식이 다 완료 안되었지만 여러 음식 들을 동시에 실행하는  비동기 =>  Asynchronous

이걸 줄여 async로 사용하고 있습니다 
await 말 그대로 해당 명령어 가 처리 완료될 때까지 기다리는것 즉 음식이 완료 될때까지 기다리는 것이라고 생각하면 됩니다.

 

이제  async, await의 사용 조건을 알아봅시다 

  1. await 키워드를 사용한 함수는 무조건 async 함수이어야 합니다
  2. async 함수는 무조건 Future를 반환해야 합니다.
Future functionName() async {
  ...
  await someFunction();
  ...
}

 

 

예제 2

 

Future<void> printOrderMessage() async {
  print('고객 주문을 기다리는 중...');
  var order = await fetchUserOrder();
  print('고객 주문은: $order');
}

Future<String> fetchUserOrder() {
  return Future.delayed(const Duration(seconds: 4), () => '바닐라라떼');
}

void countSeconds(int s) {
  for (var i = 1; i <= s; i++) {
    Future.delayed(Duration(seconds: i), () => print(i));
  }
}

void main() {
  countSeconds(4);
  printOrderMessage();
}

 

 

결과

고객 주문을 기다리는 중...
1
2
3
4
고객 주문은: 바닐라라떼

 

 

 

'모바일 공부 > Flutter' 카테고리의 다른 글

ShowDialog와 AlertDialog 팝업 메시지  (0) 2024.05.30
DropdwonButton  (0) 2024.05.17
Expanded  (0) 2024.04.15
TextEditingController  (0) 2024.03.26
BottomSheet  (0) 2024.03.25