[Flutter] 연산이 너무 많아서 UI가 그려지지 않는 문제가 있다면 Compute 로 해결!

Flutter의 compute 함수로 앱 성능 향상시키기: 백그라운드 작업 처리 완벽 가이드

Flutter 앱을 개발하다 보면 복잡한 계산이나 데이터 처리 작업 때문에 UI가 멈추는 현상을 경험할 수 있습니다. 이러한 문제를 해결하고 앱의 성능을 향상시키는 데 유용한 도구가 바로 compute 함수입니다. 이 블로그 글에서는 compute 함수의 개념, 사용법, 주의사항을 예제와 함께 자세히 설명합니다.

1. compute 함수란?

compute 함수는 Flutter에서 백그라운드 작업을 처리하기 위한 함수입니다. 복잡한 계산이나 데이터 처리 작업을 메인 스레드와 분리된 별도의 isolate에서 실행하여 UI 스레드가 멈추는 현상을 방지합니다.

2. compute 함수의 기본 사용법

import 'package:flutter/foundation.dart';

Future<int> calculateSum(List<int> numbers) async {
  return compute(_calculateSumInBackground, numbers);
}

int _calculateSumInBackground(List<int> numbers) {
  int sum = 0;
  for (int number in numbers) {
    sum += number;
  }
  return sum;
}

void main() async {
  List<int> numbers = List.generate(1000000, (index) => index);
  int sum = await calculateSum(numbers);
  print('Sum: $sum');
}

위 예제에서 calculateSum 함수는 compute 함수를 사용하여 _calculateSumInBackground 함수를 백그라운드에서 실행합니다. _calculateSumInBackground 함수는 numbers 리스트의 모든 숫자를 더하여 결과를 반환합니다. compute 함수의 첫 번째 인자는 백그라운드에서 실행할 함수이고, 두 번째 인자는 해당 함수에 전달할 데이터입니다.

3. compute 함수 사용 시 주의사항

• 함수의 제약: compute 함수에 전달하는 함수는 최상위 함수 또는 정적 함수여야 합니다. 또한, 함수는 isolate 간에 데이터를 주고받을 수 있도록 직렬화 가능한 데이터만 사용해야 합니다.
• 데이터 직렬화: compute 함수에 전달하는 데이터는 isolate 간에 전달될 수 있도록 직렬화 가능해야 합니다. 예를 들어, 사용자 정의 클래스 인스턴스는 기본적으로 직렬화할 수 없습니다. 필요한 경우 데이터를 JSON과 같은 직렬화 가능한 형태로 변환하여 전달해야 합니다.
• UI 업데이트: compute 함수는 백그라운드에서 작업을 처리하므로, UI를 직접 업데이트할 수 없습니다. UI를 업데이트하려면 compute 함수의 결과를 메인 스레드로 전달하고 setState 함수를 사용하여 UI를 업데이트해야 합니다.

4. compute 함수 활용 예제

이미지 처리

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/foundation.dart';
import 'package:image/image.dart' as img;

Future<Uint8List> resizeImage(File imageFile) async {
  return compute(_resizeImageInBackground, imageFile.readAsBytesSync());
}

Uint8List _resizeImageInBackground(Uint8List bytes) {
  img.Image image = img.decodeImage(bytes)!;
  img.Image resizedImage = img.copyResize(image, width: 200, height: 200);
  return Uint8List.fromList(img.encodePng(resizedImage));
}

위 예제에서 resizeImage 함수는 compute 함수를 사용하여 이미지 크기를 조정하는 작업을 백그라운드에서 실행합니다.

JSON 데이터 파싱

import 'dart:convert';
import 'package:flutter/foundation.dart';

Future<Map<String, dynamic>> parseJson(String jsonString) async {
  return compute(_parseJsonInBackground, jsonString);
}

Map<String, dynamic> _parseJsonInBackground(String jsonString) {
  return json.decode(jsonString);
}

위 예제에서 parseJson 함수는 compute 함수를 사용하여 JSON 데이터를 파싱하는 작업을 백그라운드에서 실행합니다.

5. 결론

compute 함수는 Flutter 앱의 성능을 향상시키는 데 매우 유용한 도구입니다. 복잡한 계산이나 데이터 처리 작업을 백그라운드에서 처리하여 UI 스레드가 멈추는 현상을 방지하고, 사용자 경험을 향상시킬 수 있습니다. compute 함수의 사용법과 주의사항을 숙지하고 적절하게 활용하여 고성능 Flutter 앱을 개발해 보세요.