[개발 일기] 2025.07.07 - await과 async

💡 개요

 

오늘은 React나 Flutter와 같은 프론트엔드에서 자주 사용되는 await와 async에 대해 정리해 보자.

 

 

 

🛠️ await와 async

 

await와 async 둘 다 비동기를 위해 사용되는 키워드이다.

 

 

async는 단어 그대로 비동기를 의미한다.

 

 

await 키워드를 사용한 메서드는 반드시 async가 사용된 메서드여야 한다.

 

 

그리고 async가 사용된 메서드는 Future을 반환해야 한다.

 

 

Future의 의미는 말 그대로 ‘미래’ 라는 뜻은 아니고, 미래에 완료될 값 또는 작업의 결과를 나타내는 객체이다.

 

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return "데이터 도착!";
}

 

 

Future에 대해 쉽게 설명하자면 아직은 값이 없지만, 언젠가는 생길 것을 나타내는 객체이다.

 

 

Flutter에서는 백엔드에 요청을 보낸 후, 응답 데이터를 받아 객체를 생성하는 경우가 많다.

 

 

이때 요청을 보낸 순간에는 데이터가 없기 때문에, 나중에 응답이 오면 그 데이터를 가지고 객체를 완성하게 되며, 이런 과정을 처리할 때 Future가 사용된다.

 

 

그리고 이 과정에서 await 키워드를 통해 Future의 결과가 준비될 때까지(= 응답 데이터가 올 때 까지) 기다리는 것이다.

 

 

 

🤔 await은 동기같은데..

 

이 키워드들은 모두 비동기와 관련된 키워드이다.

 

 

그런데 await을 보면 Future 데이터가 준비될 때까지 기다리는 동작을 하기 때문에, 얼핏 보면 동기 방식처럼 느껴진다.

 

 

하지만 정확히 말하면, await은 동기처럼 보이는 비동기 처리 방식이다.

 

 

그 이유는 await 키워드가 달린 작업을 호출한 뒤, 다른 작업은 이어서 진행하기 때문이다.

→ Dart의 await은 해당 코드 블록(함수)의 흐름만 잠시 멈추고, 다른 작업은 계속 진행되도록 한다.

 

 

 

🔄 UI와 Future의 관계

 

Flutter나 React와 같은 프레임워크에서 핵심 역할은 데이터를 화면에 그리는 것이다.

 

 

이를 위해선 반드시 Future에 포함된 데이터가 필요하다.

 

 

하지만 응답 데이터가 오기 전 까진 화면에 데이터를 그릴 수 없다.

 

 

이를 위해서 Flutter에선 FutureBuilder라는 위젯을 사용한다.

 

FutureBuilder<String>(
  future: fetchDataFromServer(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 로딩 중
    } else if (snapshot.hasError) {
      return Text('에러 발생: ${snapshot.error}');
    } else {
      return Text('데이터: ${snapshot.data}');
    }
  },
)

 

 

FutureBuilder은 Future의 상태에 때라 UI을 그리는 위젯으로 데이터가 오기 전 까진 개발자가 설정한 로딩화면을 보여주고, 데이터가 도착하면, snapshot.data을 사용해 UI을 그린다.