[Flutter] Future, async, await에 대해 알아보자

들어가기 앞서

그동안 Flutter로 개발을 해오면서

Future를 많이 사용해보았는데, 생각보다 어떻게 동작하는지 의구심을 가지면서 코딩하지 않았다.

단순하게 await를 쓰면 기다리고 Future를 사용하면 일단 얘는 기다리면 나중에 값을 주는 얘구나 라고 막연하게 생각했다.

이번 기회에 자세히 알아보면서 그에 대한 공부 내용을 정리하고자 한다.

---

1. Dart의 비동기 동작 원리

Dart는 싱글 스레드로 운영되는 언어이다.

Dart에서 Future가 있다면 자바스크립트에서는 Promise가 있다, 둘다 싱글 스레드로 동작이 된다.

그렇다면 싱글 스레드는 어떻게 동작을 하는 것일까?

for(int i=0; i<1000; i++){
	print(i);
 }
 .. next code

위와같은 코드가 있다고 한다면

next code가 실행되기 위해서라면, for문이 1000번 동작하고 종료가 된 후에나 다음코드가 실행될 것 이다.

즉 하나의 스레드를 가지고 코드가 순차적으로 실행되는 것이다.

하지만 이렇게 동작을 한다면, 플러터에서는 UI도 렌더링해야하고 서버에서 값도 받아야 할텐데

위처럼만 동작 한다면 화면을 그리는 도중에 멈춰버릴 것이다.

 

하지만 실제로 플러터로 제작된 앱을 보면 그러지 않는다. 그렇다면 어떻게 이게 가능한 것 일까?

 

일단 Dart에서 어떻게 동작하는지 자세히 알아보자.

---

2. Event loop란?

만약 우리가 Flutter앱을 실행시키는 순간

isolate라는 새로운 프로세스가 실행이 되고 이 스레드는 앱 전체를 총괄하는 유일한 단일 스레드가 된다.

이 스레드가 생성이 되는 순간 자동적으로 3가지 작업을 실행하게 되는데

1. FIFO방식으로 'MicroTask'와 'Event'를 준비
2. main 함수를 실행
3. Event loop 실행

Event loop는 'MicroTask'와 'Event'를 처리하게 된다.

그렇다면 'MicroTask'는 무엇일까? 일단 이를 설명하기 이전에

Future는 비동기적 작업이라는 것을 알고 있을 것이다.

즉, 그렇다면 동기적 작업이 실행이 되고 그 후에 비동기적 작업이 끝나는게 맞을 것이다.

그렇다면 결국 동기적 작업이 실행되는 동안 비동기적 작업에 대한 대기열을 만들어서 보관을 하기 위해

'Event'라는 큐에 Future를 FIFO 방식으로 보관하게 된다.

 

자 그러면, 이제 'MicroTask'에 대해서 설명을 하자면

위에서 설명한 것 처럼 비동기적 작업이외에 동기적작업에 대한 것들을 'MicroTask'라고 한다.

즉, Event loop가 실행될때 큐에 등록되기 전인 Future값 이외에 'MicroTask' 값들을 일단 처리 하게 된다.

그 후 더이상 내부적으로 진행할 'MicroTask'가 없다면

Event loop는 외적으로 전달되는 각종 이벤트인

1. Future
2. Stream
3. Gesture
4. Drawing
5. Reading files
6. Fetching data
7. Button touch
8. etc...

등등의 작업들을 처리하게 된다.

즉 'MicroTask'가 끝난 후에 외적인 작업들의 Task가 Event Queue에 등록이 된다는 의미이다.

---

3. 예제 코드를 통해 Future 알아보기

이제는 동작방식에 대해서 배웠으니 코드를 통해서 더 자세하게 이해를 해보도록 하자.

몇개의 코드 예제를 보면서 방금 설명한 이론이 어떻게 실제로 동작하는지 복습해보자.

 

1-1

void main() {
  print('Before the Future');
  Future(() => print('Future is complete'));
  print('After the Future');
}

위와 같은 코드가 있다고 한다면 결과값이 어떻게 나올지 예상해보자.

 

답은

Before the Future
After the Future
Future is complete

이 될 것이다.

 

위 처럼 결과값이 나오는 이유는 위에서도 설명했듯이

동기적인 부분을 먼저 실행하고 Future같은 비동기적인 부분이 들어오면 일단 Event Queue에 넣고

나중에 처리하기 때문이다. 그래서 위 결과값이

'Before the Future' -> 'After the Future' -> 'Future is complete' 순이 된다.

---

4. 예제코드를 통해 async, await 알아보기

Future를 알아봤으니, 이제는 async와 await를 알아보자.

둘다 어디에 쓰는 것 일까?

밑 예시를 확인해보자.

Future<ProcessedData> createData() {
  return _loadFromDisk().then((id){
    return _fetchNetworkData(id);
  }).then((data){
    return ProcessedData(data);
  })
}

_loadFromDisk에서 id값을 받고 그후 _fetchNetworkDate에서 다시 id값을 받고

그 후 다시 data의 값을 받고 ProcessedDate에 data값을 넣는 순서로 진행이 된다.

다만 위 코드는 가독성이 좋아보이지 않는다.

그렇다면 async와 await를 사용한다면?

Future<ProcessedData> createDate() async {
  final id = await _loadFromDisk();
  final data = await _fetchNetworkData(id);
  return ProcessedData(data);
}

위 처럼 똑같은 동작을 하는데, 코드의 가독성은 훨씬 좋아졌다.

 

이제는 조금 심화버전으로 then과 await를 사용해서 코드의 흐름이 어떻게 동작하는지 보자.

void prepareDinner() {
  print('Dinner preparation started...');

  // 재료를 쇼핑하는 비동기 함수 호출
  Future<String> shopping = shopForIngredients();

  // 쇼핑이 완료되면 요리 시작
  shopping.then((ingredients) {
    print('Ingredients bought: $ingredients');
    return cookDinner(ingredients);  // 요리 시작
  }).then((meal) {
    print('Dinner is ready: $meal');
  }).catchError((error) {
    print('Error: $error');
  });

  // 쇼핑과 요리가 진행 중이지만, 이 코드는 바로 실행됩니다.
  print('Dinner is being prepared...');
}

Future<String> shopForIngredients() async {
  await Future.delayed(Duration(seconds: 3));  // 재료 쇼핑 시뮬레이션
  return 'Fresh tomatoes and basil';
}

Future<String> cookDinner(String ingredients) async {
  await Future.delayed(Duration(seconds: 5));  // 요리 시뮬레이션
  return 'Tomato basil pasta';
}

void main() {
  prepareDinner();
  print('Main function continues running while dinner is being prepared...');
}

위 코드의 결과값은 어떻게 될까?

 

우리가 위 코드를 볼때는 이제부터 동기적인 부분과 비동기적인 부분을 나누면서 보면 이해가 더 쉬울 것 이다.

일단 처음으로는

'Dinner preparation started...' 이 실행이 될 것이다.

그 후 다음 라인인 'Future<String> shopping = shopForIngredients()' 실행되는데

shopForIngredients 함수를 보면 Future<String>을 반환하고 있다.

Future<String> shopForIngredients() async {
  await Future.delayed(Duration(seconds: 3));  // 재료 쇼핑 시뮬레이션
  return 'Fresh tomatoes and basil';
}

 

여기서는 3초를 기다린 후에 String값을 반환한다.

하지만 앞서 공부했듯이,

'Future shopping = shopForIngredients()' 앞에 await가 없으므로 기다리지 않고 일단 Future<String>값을 반환한다.

그러므로 shopping값에는 Future<String>값이 들어 갈 것이다. (확인해보지는 않았지만 이론상 그럴 것이다.)

 

이제 그 후 then 함수를 만나게 되는데 이것도 비동기적인 부분이라 일단 event queue에 넣고 나중에 처리할 것이다.

shopping.then((ingredients) {
    print('Ingredients bought: $ingredients');
    return cookDinner(ingredients);  // 요리 시작
  }).then((meal) {
    print('Dinner is ready: $meal');
  }).catchError((error) {
    print('Error: $error');
  });

 

이제 다음으로 'Dinner is being prepared...' 가 출력이 되고

Main에 있는 'Main function continues running while dinner is being prepared...' 가 출력이 된다.

 

이제 처리가 완료되지 못한 비동기적인 부분으로 다시 넘어가서

shopping.then((ingredients) {
    print('Ingredients bought: $ingredients');
    return cookDinner(ingredients);  // 요리 시작
  }).then((meal) {
    print('Dinner is ready: $meal');
  }).catchError((error) {
    print('Error: $error');
  });

ingredients이라는 값은 3초를 대기 후 값이 튀어나오게 되고,

'Ingredients bought: Fresh tomatoes and basil' 가 출력

Future<String> shopForIngredients() async {
  await Future.delayed(Duration(seconds: 3));  // 재료 쇼핑 시뮬레이션
  return 'Fresh tomatoes and basil';
}

Future<String> cookDinner(String ingredients) async {
  await Future.delayed(Duration(seconds: 5));  // 요리 시뮬레이션
  return 'Tomato basil pasta';
}

5초 후에 'Dinner is ready: Tomato basil pasta' 가 출력되고 종료 된다.

 

5. 추가 예제

Future<void> printOrderMessage() async {
  print('Awaiting user order...');
  var order = await fetchUserOrder();
  print('Your order is: $order');
}

Future<String> fetchUserOrder() {
  // Imagine that this function is more complex and slow.
  return Future.delayed(const Duration(seconds: 4), () => 'Large Latte');
}

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

// You can ignore this function - it's here to visualize delay time in this example.
void countSeconds(int s) {
  for (var i = 1; i <= s; i++) {
    Future.delayed(Duration(seconds: i), () => print(i));
  }
}

위 코드의 결과값은 어떻게 될까?

내가 처음 예상한 결과값은 아래와 같다.

Awaiting user order...
Your order is: Large Latte
1
2
3
4

하지만 실제 출력결과값은

Awaiting user order...
1
2
3
4
Your order is: Large Latte

위와 같았다.

왜 그런것일까? 한번 코드의

var order = await fetchUserOrder();
print('Awaiting user order...');

위 두줄의 순서를 변경해보았다.

1
2
3
4
Awaiting user order...
Your order is: Large Latte

그랬더니 결과값이 이렇게 나왔다.

즉, 내가 이해한게 맞다면

await를 만나면 그 함수의 실행을 잠시 멈추고 Event Queue에 있는 값들을 FIFO으로 처리한다음

두번째 순서인

var order = await fetchUserOrder();
print('Awaiting user order...');
print('Your order is: $order');

를 처리하는 것 같다.

---

마무리 총평

역시 플러터는 배울 수록 재밌다. 영어 공부를 열심히 해서 공식문서를 원어민 처럼 읽어보자!