Flutter & Dart 동기 비동기 처리 방법

1. 동기식 처리와 비동기식 처리 란 ? 

 

 1) 동기 처리 : 동기 처리에서는 요청을 보낸 후 응답을 받아야만 다음 작업을 기다리고 수행합니다. 이는 각 작업이 순차적으로 실행되어 현재 작업이 완료될 때까지 프로그램 실행을 차단한다는 의미입니다.

 

 2) 비동기 처리 : 비동기 처리에서는 요청을 보낸 후 즉각적인 응답을 받지 못하더라도 프로그램은 다음 작업을 계속 실행합니다. 여러 작업을 동시에 처리하는 데 유용하며 응답을 기다리는 동안 프로그램 실행을 차단하지 않습니다. 비동기 처리는 일반적으로 원격 서버에서 데이터 가져오기, 파일에서 데이터 읽기 또는 이벤트 처리와 같은 작업에 사용됩니다.

 

따라서 주요 차이점은 동기 처리는 다음 작업으로 이동하기 전에 각 작업이 완료될 때까지 기다리는 반면, 비동기 처리는 프로그램이 특정 작업이 완료되기를 기다리는 동안 다른 작업을 계속할 수 있다는 것입니다. 이는 특히 사용자 인터페이스와 같이 응답성과 효율성이 중요한 시나리오에서 중요한 기능입니다.

2. Flutter 에서 동기, 비동기 사용 하기

플러터에서 비동기 방식을 처리하기 위해 사용하는 Future, async, await  들이 있다. 

 1) Future

Flutter에서 'Future'는 미래 특정 시점에 사용할 수 있는 값이나 오류를 나타내는 객체입니다. 이는 Flutter 비동기 프로그래밍 모델의 기본 부분으로, 개발자가 메인 스레드를 차단하지 않고 동시에 작업을 수행할 수 있도록 해줍니다. Future 클래스는 Flutter에서 사용하는 프로그래밍 언어인 Dart의 일부입니다. Future 는 uncompleted 와 completed 의 상태를 가진다.

 

uncompleted : 비동기 함수가 호출되면 완료되지 않은 상태의 Future를 반환합니다. 이는 미래가 보류 중이며 비동기 작업이 완료되거나 오류가 발생하기를 기다리고 있음을 의미합니다.

completed  : 비동기 작업이 완료되면 Future는 완료 상태로 전환됩니다. 작업이 성공했고 오류가 발생하지 않은 경우 'Future'에는 'T' 유형의 값이 포함됩니다.

 

개발자는 then, catchError, whenComplete와 같은 메서드를 사용하여 Future 완료를 처리할 수 있습니다. then 메소드를 사용하면 Future가 성공적으로 완료될 때 실행될 콜백을 지정하고 catchError는 오류를 처리할 수 있습니다.

Future<String> fetchUserOrder() {
  return Future.delayed(const Duration(seconds: 2), () => 'Large Latte');
}

void main() {
  fetchUserOrder().then((value) {
    print('Order: $value');
  });
  print('Fetching user order...');
}

2) async, await

Flutter에서 async와 await는 비동기 프로그래밍 작업에 사용되는 키워드입니다. 이는 Flutter에서 사용하는 프로그래밍 언어인 Dart의 일부입니다. 이러한 키워드를 사용하면 읽기 쉽고 동기적으로 동작하는 비동기 코드를 더 쉽게 작성할 수 있습니다.

 

비동기 함수 생성

비동기 함수를 정의하려면 함수 선언에 'async' 키워드를 사용한다. 이를 통해 함수는 본문 내에서 await 키워드를 사용할 수 있습니다.

Future<void> fetchData() async {
  
}

 

비동기 함수 내에서 await 사용

'await' 키워드는 비동기 함수 내에서 지정된 비동기 작업이 완료될 때까지 실행을 일시 중지하는 데 사용됩니다. 기다리고 있는 표현식은 Future 유형이어야 합니다.

Future<void> fetchData() async {
  var data = await fetchDataFromServer();

}

 

 

Future<String> fetchUserOrder() async {
  await Future.delayed(const Duration(seconds: 2));
  return 'Large Latte';
}

Future<void> main() async {
  print('Fetching user order...');
  
  try {
    var order = await fetchUserOrder();
    print('Your order is: $order');
  } catch (error) {
    print('Error fetching order: $error');
  }
}

 

와 같이 사용 할 수 있다.