[Dart] Future, async, await

🔎예시로 Future 이해하기

🍔패스트푸드점에서 햄버거를 사 먹는다고 가정🍔
햄버거를 주문하고 주문번호가 적힌 영수증을 받는다->내 주문번호가 화면에 뜨는 동안 (내 햄버거가 나올동안) 화장실에 다녀오거나 음악을 듣거나 원하는 다른일을 할 수 있다->다른일을 하는 도중에 내 주문 번호가 모니터에 나왔는지만 확인하면 된다->그러나 우리가 가지고 있는 주문영수증은 최종적으로 우리가 원하는 것은 아님, 영수증은 미래에 우리가 주문한 햄버거를 받을 수 있다는 일종의 약속 ! (실제로 자바스크립트와 같은 언어에서는 Future와 더불어 ‘약속’이라는 뜻의 Promise라는 클래스가 존재함)

이렇듯 Future은 우리가 주문 후 아직 받지 않은 햄버거처럼 현재에는 실제적으로 존재하지 않는 상태임, 그러나 잠시 후에 주문 영수증이 햄버거로 교환될때 비로소 구체적인 사물로 바뀌게 된다.

Dart에서 Future클래스를 사용한다는 것은 미래에 String,int,image 등 그 무언가가 구체적인 결과물로 나타나서 실제적인 객체로 반환된다는 의미
그래서 Future은 우리가 가지고 있는 주문 영수증과 같은 것
즉, 일종의 약속이자 그 결과를 잠시 후에 확인할 수 있는 실제적인 사물이 되는 것

Future을 설명 할 때 아직 개봉하지 않은 박스로 비유할 수도 있다.
Future클래스를 사용하면 일단 Future이라는 객체, 즉 박스하나가 생성이 되고 후에 연락을 받고 박스를 열어보면 int나 String 또는 에러메세지 건 실제적인 객체가 리턴 즉, 박스 안에 존재하기 때문이다.
우리는 주문할 때 당연히 우리가 잠시 후에 무엇을 먹게 될 지 알고 있다.Future도 마찬가지로 우리가 어떤 결과물을 받아야 할 지 미리 지정을 해 줄 수 있다
Future클래스는 제너릭처럼 우리가 원하는 데이터 형을 지정해 줄 수 있다.
Future< >

ex) Future<String>

🔎예시로 async,await 이해하기

바쁜 점심시간대 중국집에서 10명 중 8명은 짜장면을 주문하고 1명은 짬뽕, 1명은 볶음밥을 주문했을때 주방장이 주문이 제일 먼저 들어왔고 제일 양이 많은 짜장면만을 먼저 만들고 나머지 메뉴는 전혀 만들지 않는다면 짬뽕과 볶음밥은 한참 뒤에 만들어 질 것이다.
바쁘면 동시에 짜장면 면을 삶으며 밥도 볶고 짬뽕 국물도 만들 수 있다.->일을 하는데 있어서 추구하는 목적이 다르고 동시에 일어나지 않을 수 있는 방식으로 일하는 것 ->Async 비동기
짜장면만 먼저 만드는 것 -> 한가지 목적만을 가지고 순서대로 해야할 일 한가지만 하는것->Synchronous 동기

💡async와 관련해서 await는 작업이 처리될때 까지 기다리라는 의미 !
1.await 키워드를 사용한 함수는 무조건 async 함수이어야 합니다.

Future functionName() async {
  ...
  await someFunction();
  ...
}

2.async 함수는 무조건 Future 를 반환해야 합니다.

🔎코드로 Future 이해하기

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

Future는 비동기를 위해서 존재한다. 만약 100줄의 코드였다고 가정해본다면, 동기적으로 처리했을 경우 Future<int> 에서 값이 나올 때까지 100줄의 코드는 동작하지 않고 정지해있을것이다. 이 100줄의 코드에 Future<int>로부터 나올 값이 전혀 필요없다면 매우 비효율적일 것이다.

Future<int> 에서 값이 나오지 않아도 계속해서 동작을 수행할 수 있도록 비동기적으로 처리하는 것이다. 그렇기 때문에 위 코드에서 3초가 지나 future의 then이 동작하기 전에 계속해서 코드를 수행하기 때문에 가장 밑의 print 가 먼저 출력이 된다.

🔎코드로 Future async,await 이해하기

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

이 함수는 미래에 ProcessedData 가 나올 상자인 Future를 return한다. 가장 먼저 디스크로부터 id 값을 읽어들이는 _loadFromDsik() 함수가 수행되고, id 를 읽어들이면 _fetchNetworkData() 함수에 id를 인자로 넣어서 네트워크를 이용해 data 를 받아온다. 그리고 data 를 다 받아오면 ProcessedData(data) 를 return 한다.

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

then 을 이용해 작성한 코드와 동일한 기능을 하는 코드지만, 훨씬 간결하며 마치 동기적으로 일어나는 코드인 것 처럼 보인다. 이러한 간결함 때문에 async / await 는 Future 를 조금 더 용이하게 사용하도록 도와준다.

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

코드의 순서를 살펴보면
1.createData() 함수가 실행될 때 가장먼저 첫 번째 줄의 await 키워드가 붙은 _loadFromDisk() 를 수행할 것이다. 그러면 해당 함수를 실행하면서 '아, await 를 보니 이 함수를 수행하려면 뭔가 다른 것들이 필요하겠군.' 이라고 생각하며 일단 이 함수의 수행을 멈춘다.

2.그리고 함수를 호출한 곳에 Future 를 return 합니다. 그리고는 "이 함수는 비동기적인 처리가 좀 필요해. 일단 ProcessedData 가 담길 상자 Future 를 미리 줄게. 나중에 이 함수가 모두 완료되면 ProcessedData 가 나올거야." 라고 말한다.
해당 함수는 await 가 붙은 _loadFromDisk() 함수가 끝날 때까지 다음 동작을 수행하지 않고 가만히 기다립니다. 마치 상자에서 값이 나와야 then 함수를 수행할 수 있었던 것과 같이 말이다.

3._loadFromDisk() 함수의 수행이 완료되면 그 다음 줄을 수행한다. 이번에도 await 가 붙은 함수이기 때문에 마찬가지로 _fetchNetworkData(id) 가 수행완료 될 때까지 함수를 더 이상 진행하지 않고 기다린다.

4.2번 째 줄도 다 마치면 이제 return ProcessedData(data) 가 수행된다. 이 return 을 통해 createData() 를 호출한 녀석이 받은 상자에서 ProcessedData 가 나오게 된다.

이런 순서로 동작을 합니다. await 를 만나면 해당 동작을 완료되기 전까지 멈추어서 기다리기 때문에 then(...) 함수 처럼 동작을 하며 전체적인 코드는 훨씬 가독성이 좋다. 그리고 위 순서에서 2번 때문에 async 함수의 return 타입은 무조건 Future 이어야 한다. await 를 사용하였을 테니 async 함수일 테고, await 를 사용하였기 때문에, 함수의 return 까지 가기 이전에 미리 Future 를 반환하게 된다. 따라서 async 함수는 무조건 Future 를 반환해야 하는 것!

💡await 를 만나면 함수를 잠시 멈추고 함수를 호출한 곳에 Future 를 return 한다.
💡await 가 붙은 동작이 완료되기 전까지 함수를 더 이상 진행하지 않는다.
💡return 을 통해 1번에서 주었던 Future 에서 return 값이 나오게 한다.

📍참고자료

• 코딩쉐프 Future, async, await 이해하기