플러터에서 비동기 작업과 콜백 함수 이해하기

비동기 프로그래밍의 필요성

비동기 프로그래밍은 앱이 사용자 입력에 신속하게 응답할 수 있도록 돕는 중요한 기법입니다.

특히, 네트워크 요청, 파일 읽기/쓰기, 타이머와 같은 시간이 걸리는 작업을 처리할 때 주 스레드를 차단하지 않기 위해 사용됩니다.

플러터(Flutter)에서도 비동기 프로그래밍은 매우 중요한 역할을 하며, 이를 처리하는 데 콜백 함수가 자주 사용됩니다.

이번 포스트에서는 비동기 작업과 콜백 함수가 무엇인지, 왜 필요한지, 그리고 플러터에서 어떻게 사용하는지 살펴보겠습니다.

---

목차

1. 비동기 작업이란?
2. 콜백 함수란?
3. 플러터에서 비동기 작업 처리
4. 예제: API 호출과 콜백 함수
5. Future와 async/await
6. 마무리

---

1. 비동기 작업이란? 

비동기 작업은 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 계속할 수 있도록 하는 프로그래밍 방식을 말합니다.

이렇게 하면 사용자는 앱이 "멈춘" 것처럼 느끼지 않게 되며, 더욱 부드러운 사용자 경험을 제공합니다.

예를 들어, 네트워크 요청을 비동기적으로 처리하면 데이터가 로드되는 동안 앱의 다른 부분을 사용할 수 있게 됩니다.

2. 콜백 함수란? 

콜백 함수는 특정 이벤트나 작업이 완료되었을 때 호출되는 함수입니다.

비동기 작업에서 콜백 함수는 작업이 완료된 후 실행될 코드를 정의하는 데 사용됩니다.

예를 들어, API 호출이 완료되면 데이터를 화면에 표시하거나 오류 메시지를 보여줄 수 있습니다.

3. 플러터에서 비동기 작업 처리

플러터에서는 비동기 작업을 처리하기 위해 Future와 async/await 패턴을 사용합니다.

Future는 미래에 값이 준비될 것을 나타내는 객체로, 비동기 작업의 결과를 나타냅니다.

 

기본적인 비동기 작업 예제

import 'dart:async';

void fetchData() {
  Future.delayed(Duration(seconds: 2), () {
    print('데이터 가져오기 완료!');
  });
}

void main() {
  print('데이터 가져오기 시작');
  fetchData();
  print('다른 작업 진행 중');
}

이 예제에서 Future.delayed는 2초 후에 데이터를 가져오는 비동기 작업을 시뮬레이션합니다.

출력은 다음과 같습니다.

데이터 가져오기 시작
다른 작업 진행 중
데이터 가져오기 완료!

비동기 작업이 실행되는 동안 프로그램은 "다른 작업 진행 중" 메시지를 출력하고 다른 작업을 계속할 수 있습니다.

4. 예제: API 호출과 콜백 함수

다음은 API 호출 후 콜백 함수를 사용하는 예제입니다.

이 예제는 가상의 API를 사용하여 데이터를 가져오는 과정에서 콜백을 활용하는 방법을 보여줍니다.

import 'package:http/http.dart' as http;
import 'dart:convert';

void fetchUserData(Function callback) async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users/1'));

  if (response.statusCode == 200) {
    callback(jsonDecode(response.body));
  } else {
    callback(null);
  }
}

void main() {
  print('데이터 가져오기 시작');
  fetchUserData((data) {
    if (data != null) {
      print('사용자 이름: ${data['name']}');
    } else {
      print('데이터 가져오기 실패');
    }
  });
}

이 코드는 HTTP 요청이 완료되면 콜백 함수를 호출하여 응답 데이터를 처리합니다. callback 함수는 데이터를 파싱하여 사용할 수 있습니다.

5. Future와 async/await

콜백 함수 대신, 플러터에서는 async와 await를 사용하여 비동기 작업을 더욱 쉽게 처리할 수 있습니다. 이는 코드가 보다 직관적으로 보이도록 돕습니다.

 

async/await 예제

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchUserData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users/1'));

  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print('사용자 이름: ${data['name']}');
  } else {
    print('데이터 가져오기 실패');
  }
}

void main() {
  print('데이터 가져오기 시작');
  fetchUserData();
  print('다른 작업 진행 중');
}

이 예제에서 fetchUserData 함수는 async로 선언되어 있으며, await 키워드를 사용하여 http.get 호출이 완료될 때까지 기다립니다.

이렇게 하면 콜백을 사용하는 것보다 코드가 깔끔하고 이해하기 쉬워집니다.

6. 마무리

플러터에서 비동기 작업과 콜백 함수는 앱의 반응성을 유지하고 비동기적 이벤트를 효율적으로 처리하는 데 중요한 역할을 합니다.

Future와 async/await를 잘 활용하면 더 깔끔하고 관리하기 쉬운 코드를 작성할 수 있습니다.

이 포스트가 비동기 프로그래밍의 기초를 이해하고 실습하는 데 도움이 되길 바랍니다.

더 궁금한 점이나 도움이 필요하면 댓글로 남겨 주세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱