[Flutter/Dart] 비동기 코드 작성하기

Flutter 개발에서 네트워크 요청, 파일 입출력, 데이터베이스 작업 등은 비동기(Asynchronous) 방식으로 처리됩니다. 이를 효율적으로 다루기 위해 Dart에서는 Future와 async/await을 제공합니다. 이번 글에서는 Flutter에서 비동기 코드를 작성하는 다양한 방법과 예제를 소개합니다.

1. 비동기 코드가 필요한 이유

앱이 네트워크 요청이나 파일 읽기 같은 작업을 수행할 때 동기(Synchronous) 코드로 처리하면 해당 작업이 완료될 때까지 UI가 멈춰 사용자 경험이 나빠집니다. 이를 방지하기 위해 비동기 코드를 활용하면 앱의 응답성을 유지하면서 작업을 진행할 수 있습니다.

2. Future와 async/await 사용법

Future란?

Dart의 Future는 미래에 받을 값을 나타내는 객체입니다. 예를 들어, HTTP 요청을 보낸 후 응답을 받을 때까지 기다리는 동안 다른 작업을 수행할 수 있습니다.

Future 기본 예제

Future<String> setData() {
  return Future.delayed(Duration(seconds: 2), () => "데이터 로드 완료");
}

void main() {
  setData().then((value) => print(value));
  print("데이터 요청 중...");
}

Future.delayted() 함수는 비동기 방식으로 동작하는 코드로 2초 뒤에 실행하라와 같은 코드를 작성할 때 사용합니다. 출력결과는 다음과 같습니다.

데이터 요청 중...
(2초 후)
데이터 로드 완료

실행 순서를 보면 print(value)의 경우 2초 뒤 실행되 기 때문에 비동기 방식으로 실행되어 가장 마지막에 실행된 것을 볼 수 있습니다.

async/await 사용법

async/await을 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 좋아집니다.

async/await 기본 예제

setData() 함수를 호출할 때 await을 붙여주면 결과가 응답될 때까지 기다리기 때문에 Future를 벗겨낸 타입 즉 String으로 반환 값을 받을 수 있습니다.

Future<String> setData() async {
  await Future.delayed(Duration(seconds: 2));
  return "데이터 로드 완료";
}

void main() async {
  String data = await setData();
  print("데이터 요청 중...");
  print(data);
}

출력결과는 다음과 같습니다.

(2초 후)
데이터 요청 중...
데이터 로드 완료

[Flutter/Dart] 비동기 코드 작성하기 - Future,async/await