Flutter - 비동기처리의 이해

필자가 있는 단톡방에서 비동기처리의 이해가 부족해서

 

발생하는 문제들을 편법으로 해결하거나 비슷한 질문인데

 

계속 물어보시는분들이 많아서 혹시나 도움이 될까 예제를 만들어봤습니다

 

여기서는 void와 Future<void>와 뭐가 다른지 차근차근 알아보겠습니다

 

먼저 void와 Future<void>는 콜하는 부분에서 따로 처리를 따로 해주지 않는다면 차이가 없습니다

 

무슨말인지 예제로 알아보겠습니다

void main(){
  a();
  b();
}

Future<void> a()async{
  await Future.delayed(Duration(seconds: 2));
  print('a finished');
}

void b()async{
  await Future.delayed(Duration(seconds: 1));
  print('b finished');
}

지금 이 코드를 보셨을 때 뭐가먼저 출력되는지 알고계신다면 이 부분은 넘어가주세요

 

해당 예제를 보면 비동기 처리의 이해가 되어있다면 당연히 b가 먼저 출력되고 a가 출력되겠다가 보이는데

 

아직 이해가 부족한분들은 a에서 async await이 있으니 a가 끝난 후 b가 출력이 되지않을까 생각하게 됩니다

 

출력을 한번 볼까요?

b finished
a finished

결론부터 말하자면 async await을 사용할 때

 

Future<void>를 사용하는 이유는 해당 함수를 콜하는 부분에서

 

비동기처리를 확실하게 완료하고 싶을 때 사용하고

 

void는 비동기 처리를 하되 완료시점은 상관없는 경우에 사용합니다

void main()async{
  await a();
  b();
}

Future<void> a()async{
  await Future.delayed(Duration(seconds: 2));
  print('a finished');
}

void b()async{
  await Future.delayed(Duration(seconds: 1));
  print('b finished');
}

이런식으로 말이죠

 

출력을 보면

a finished
b finished

a가 끝날때까지 await을 통해 기다린 후 b를 출력됩니다

 

제 splash예제에서도 같은 원리를 이용한건데

(링크 : devmemory.tistory.com/3)

 

가끔 단톡방에 질문 올라오는걸 보면 이 부분을 이해하지 못한상태에서 넘어가서 발생하는 문제인거 같아

 

다시한번 예제로 설명드리고 넘어가도록 하겠습니다

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

  void init() async {
  //작업 처리
    Navigator.push();
  }
  
  @override
  Widget build(BuildContext context){
  //생략
  }

먼저 initState에서 async await을 사용하지 않아서 init의 작업이 끝날때까지 기다려주지 않습니다

 

그러면 init작업중에 build가 콜이 되고 build위젯이 보여지게 됩니다

 

그 후 init의 작업처리가 다 끝나면 맨 뒤에있는 Navigator.push를 통해 다음 화면으로 이동하게 되는거죠

 

같은 맥락으로 init에서 처리를 했는데 왜 데이터가 출력이 안되냐 라는 질문도 자주 올라오는데

 

initState에서 확실하게 작업이 끝나는 구조를 만들었는지 내부에 비동기처리가 있는지 확인을 해봐야되고

 

만약에 확실하게 작업이 끝나지 않는 구조라면 build에서 FutureBuilder을 이용해 뿌려주거나

 

이전화면에서 작업을 끝내고 해당 화면으로 넘어가면 해결이 될겁니다