Flutter의 멀티스레딩(Multithreading) 사용법

Flutter는 싱글 스레드 환경에서 동작하지만, 백그라운드 작업을 수행하거나 UI 스레드의 부하를 줄이기 위해 멀티스레딩 기법을 사용할 수 있습니다. 멀티스레딩을 통해 CPU 집약적인 작업이나 긴 시간 동안 실행되는 작업을 별도의 스레드에서 실행할 수 있습니다. 이번 글에서는 Flutter에서 멀티스레딩을 구현하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Isolate 사용하기

Flutter에서 멀티스레딩을 구현하는 기본적인 방법은 Isolate를 사용하는 것입니다. Isolate는 Dart의 독립된 실행 단위로, 별도의 메모리 공간에서 실행되며 다른 Isolate와 독립적으로 동작합니다.

2. Isolate 생성

Isolate를 생성하려면 Isolate.spawn 메서드를 사용합니다. 다음은 Isolate를 생성하고 실행하는 간단한 예제입니다.

 

import 'package:flutter/material.dart';
import 'dart:isolate';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IsolateExample(),
    );
  }
}

class IsolateExample extends StatefulWidget {
  @override
  _IsolateExampleState createState() => _IsolateExampleState();
}

class _IsolateExampleState extends State<IsolateExample> {
  String _message = 'No message';

  Future<void> _startIsolate() async {
    final receivePort = ReceivePort();
    await Isolate.spawn(_isolateEntry, receivePort.sendPort);

    receivePort.listen((data) {
      setState(() {
        _message = data;
      });
    });
  }

  static void _isolateEntry(SendPort sendPort) {
    sendPort.send('Hello from Isolate!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Isolate Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _startIsolate,
              child: Text('Start Isolate'),
            ),
            SizedBox(height: 20),
            Text(_message),
          ],
        ),
      ),
    );
  }
}

 

 

위 코드는 Isolate.spawn 메서드를 사용하여 새로운 Isolate를 생성하고, SendPort와 ReceivePort를 사용하여 Isolate 간에 메시지를 주고받는 예제입니다. 버튼을 클릭하면 Isolate가 생성되고, Isolate로부터 메시지를 받아 화면에 표시합니다.

3. 복잡한 작업 수행

Isolate를 사용하여 CPU 집약적인 작업을 백그라운드에서 수행할 수 있습니다. 다음은 피보나치 수열을 계산하는 복잡한 작업을 Isolate에서 수행하는 예제입니다.

 

import 'package:flutter/material.dart';
import 'dart:isolate';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IsolateExample(),
    );
  }
}

class IsolateExample extends StatefulWidget {
  @override
  _IsolateExampleState createState() => _IsolateExampleState();
}

class _IsolateExampleState extends State<IsolateExample> {
  String _message = 'No result';

  Future<void> _startIsolate() async {
    final receivePort = ReceivePort();
    await Isolate.spawn(_isolateEntry, receivePort.sendPort);

    receivePort.listen((data) {
      setState(() {
        _message = 'Result: $data';
      });
    });
  }

  static void _isolateEntry(SendPort sendPort) {
    int result = _calculateFibonacci(40);
    sendPort.send(result);
  }

  static int _calculateFibonacci(int n) {
    if (n <= 1) return n;
    return _calculateFibonacci(n - 1) + _calculateFibonacci(n - 2);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Isolate Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _startIsolate,
              child: Text('Start Calculation'),
            ),
            SizedBox(height: 20),
            Text(_message),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 피보나치 수열의 40번째 값을 계산하는 작업을 Isolate에서 수행하는 예제입니다. 버튼을 클릭하면 Isolate가 생성되어 피보나치 수열을 계산하고, 결과를 화면에 표시합니다.

 

 

반응형

 

 

4. Isolate와 JSON 파싱

Isolate를 사용하여 JSON 데이터를 파싱하는 예제를 살펴보겠습니다. 이를 통해 네트워크 요청으로 받은 JSON 데이터를 백그라운드에서 처리할 수 있습니다.

import 'package:flutter/material.dart';
import 'dart:isolate';
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IsolateExample(),
    );
  }
}

class IsolateExample extends StatefulWidget {
  @override
  _IsolateExampleState createState() => _IsolateExampleState();
}

class _IsolateExampleState extends State<IsolateExample> {
  String _message = 'No data';

  Future<void> _startIsolate() async {
    final receivePort = ReceivePort();
    await Isolate.spawn(_isolateEntry, receivePort.sendPort);

    receivePort.listen((data) {
      setState(() {
        _message = 'Parsed Data: $data';
      });
    });
  }

  static void _isolateEntry(SendPort sendPort) {
    final jsonData = '''
      {
        "name": "John",
        "age": 30,
        "city": "New York"
      }
    ''';
    final parsedData = json.decode(jsonData);
    sendPort.send(parsedData);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Isolate Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _startIsolate,
              child: Text('Parse JSON in Isolate'),
            ),
            SizedBox(height: 20),
            Text(_message),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 JSON 데이터를 Isolate에서 파싱하는 예제입니다. 버튼을 클릭하면 Isolate가 생성되어 JSON 데이터를 파싱하고, 결과를 화면에 표시합니다.

5. compute 함수 사용

Flutter에서는 compute 함수를 사용하여 간편하게 Isolate를 생성하고 작업을 수행할 수 있습니다. compute 함수는 특정 함수를 백그라운드에서 실행하고, 결과를 메인 스레드로 반환합니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ComputeExample(),
    );
  }
}

class ComputeExample extends StatefulWidget {
  @override
  _ComputeExampleState createState() => _ComputeExampleState();
}

class _ComputeExampleState extends State<ComputeExample> {
  String _message = 'No data';

  Future<void> _parseJson() async {
    final result = await compute(_parseAndReturnJson, '''
      {
        "name": "John",
        "age": 30,
        "city": "New York"
      }
    ''');

    setState(() {
      _message = 'Parsed Data: $result';
    });
  }

  static Map<String, dynamic> _parseAndReturnJson(String jsonStr) {
    return json.decode(jsonStr);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Compute Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _parseJson,
              child: Text('Parse JSON with Compute'),
            ),
            SizedBox(height: 20),
            Text(_message),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 compute 함수를 사용하여 JSON 데이터를 백그라운드에서 파싱하는 예제입니다. compute 함수는 첫 번째 인수로 백그라운드에서 실행할 함수를 받고, 두 번째 인수로 해당 함수에 전달할 데이터를 받습니다.

결론

Flutter 애플리케이션에서 멀티스레딩을 사용하면 백그라운드에서 복잡한 작업을 수행하여 UI 스레드의 부하를 줄일 수 있습니다. Isolate와 compute 함수를 사용하여 백그라운드 작업을 구현하는 방법을 통해 멀티스레딩 기능을 효율적으로 활용할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 멀티스레딩을 효율적으로 사용해보세요. 멀티스레딩을 통해 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선할 수 있습니다.