본문 바로가기
Flutter

동기 처리방식과 비동기 처리방식

by MiaCoder 2024. 2. 10.

flutter을 비롯한 여러 프로그래밍을 보면 항상 동기방식과 비동기방식이 나온다. 

 

이 개념을 숙지하고 앱이나 웹프로그램에 활용한다면 상황에 따하 훨신 효율적으로 처리할 수 있을것이다.

 

 

동기프로그래밍(Synchronous programming)

코드가 순차적으로 실행되는 프로그래밍 패러다임.

 

한 작업 끝나기 전에는 다음 작업으로 넘어가지 않고, 순차적으로 명령어를 실행하는 개념.

 

비동기 프로그래밍(Asynchronous programming)

코드가 순차적으로 진행되지 않고, 여러 작업이 동시에 진행되는 개념. 즉 멀티테스킹이 구현되고 있는 것이다.

 

그렇다면 flutter에서 비동기를 처리하는 방법은 어떤 것이 있을까요?

 

1. Future 비동기 작업이 끝날 때 까지 대기할 수 있는 개채입니다. 비동기 작업이 시작되면 결과를 나타내기 시작하며 작업이 완료되면 해당 결과를 반환합니다. 성공, 실패, 작업완료 등을 나타냅니다.

 

 

 

2. async/await  코드를 동기적으로 보이게 만들면서 비동기로 처리합니다.

async함수 내에서 await를 이용해서 비동기 작업이 완료될떄 까지 대기할 수 있습니다. 

await는 해당 비동기가 완료될 때 까지 대기하다가 완료된 후 값을 반환합니다.

 

3. Stream 비동기적으로 여러 값을 이벤트처리할 수 있는 매체입니다. 

 

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 비동기로 데이터를 가져오는 함수
  Future<String> fetchData() async {
    // 비동기 작업 예시: 2초 동안 대기 후 결과 반환
    await Future.delayed(Duration(seconds: 2));
    return "데이터가 성공적으로 로드되었습니다!";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 비동기 처리'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 비동기 함수 호출 및 결과 처리
            loadData();
          },
          child: Text('데이터 불러오기'),
        ),
      ),
    );
  }

  // 데이터를 비동기적으로 로드하고 결과를 출력하는 함수
  void loadData() async {
    print("데이터 불러오기 시작");

    try {
      // fetchData 함수를 호출하고 완료될 때까지 대기
      String result = await fetchData();

      // 비동기 작업 완료 후 결과를 출력
      print("데이터 불러오기 성공: $result");
    } catch (error) {
      // 에러 처리
      print("데이터 불러오기 실패: $error");
    }
  }
}

 

이런식으로 활용하여 멀티스레드를 적극적으로 활용하면서도 await를 활용해 순서를 지켜 오류를 방지하며 사용할 수 있습니다.

 

참고코드를 보며 활용하면 좋겠습니다.