[Flutter 트랙] 앱개발 종합반 1-12 - 동기 / 비동기

Dart 동기 & 비동기 개념과 Flutter 실전 적용

이번 포스팅에서는 Flutter 개발을 위한 Dart의 동기(Synchronous)와 비동기(Asynchronous) 프로그래밍 개념을 설명하고, 실제 프로젝트에서 이를 활용하는 방법을 정리합니다.

---

1. 동기(Synchronous)란?

동기 방식은 작업이 순차적으로 실행되는 구조입니다. 하나의 작업이 끝나야 다음 작업이 실행되며, 특정 작업이 오래 걸리면 그동안 다른 작업은 대기해야 합니다.

📌 동기 처리의 특징

• 작업이 순차적으로 진행됨
• 하나의 작업이 끝나야 다음 작업이 실행됨
• 대기 시간이 길어질 경우 프로그램 성능 저하

📌 동기 방식 예제

void main() {
    print("작업 1 시작");
    performTask(); // 함수 실행
    print("작업 1 완료");
}

void performTask() {
    print("작업 2 실행");
}

// 출력 결과:
// 작업 1 시작
// 작업 2 실행
// 작업 1 완료

---

2. 비동기(Asynchronous)란?

비동기 방식은 **여러 작업이 동시에 실행**될 수 있도록 하는 방식입니다. 즉, 하나의 작업이 끝날 때까지 기다리지 않고, 다른 작업을 먼저 수행할 수 있습니다.

📌 비동기 처리의 특징

• 여러 작업이 동시에 실행될 수 있음
• 시간이 오래 걸리는 작업을 처리하는 동안 다른 작업도 수행 가능
• 비동기 방식이 복잡할 경우 디버깅이 어려울 수 있음

📌 비동기 방식 예제

void main() async {
    print("작업 1 시작");
    await performTask(); // 비동기 함수 실행 (대기)
    print("작업 1 완료");
}

Future performTask() async {
    await Future.delayed(Duration(seconds: 2)); // 2초 대기
    print("작업 2 실행");
}

// 출력 결과:
// 작업 1 시작
// (2초 후)
// 작업 2 실행
// 작업 1 완료

---

3. 동기와 비동기의 차이점

구분	동기(Synchronous)	비동기(Asynchronous)
작업 방식	한 번에 하나의 작업만 수행	여러 작업을 동시에 수행 가능
실행 순서	작업이 순차적으로 실행됨	작업이 독립적으로 실행됨
성능	오래 걸리는 작업이 있으면 전체적인 속도가 느려질 수 있음	CPU 리소스를 효과적으로 활용 가능

---

4. 비동기 프로그래밍에서 Async & Await

Dart에서 **비동기 코드를 작성할 때는** async와 await 키워드를 사용합니다.

📌 async & await의 역할

• async: 해당 함수가 비동기 함수임을 명시
• await: 비동기 함수 실행 시, 해당 작업이 완료될 때까지 대기

📌 Async & Await 예제

void main() async {
    print("API 요청 시작...");
    String data = await fetchData();
    print("API 응답: $data");
}

Future fetchData() async {
    await Future.delayed(Duration(seconds: 3)); // 3초 대기
    return "서버에서 받은 데이터";
}

// 출력 결과:
// API 요청 시작...
// (3초 후)
// API 응답: 서버에서 받은 데이터

---

5. Flutter 프로젝트에서 비동기 적용

이제 Flutter 프로젝트에서 비동기 처리를 적용하는 예제를 살펴보겠습니다.

📌 1) 버튼 클릭 시 2초 후 텍스트 변경

String message = "초기 메시지";

void updateMessage() async {
    await Future.delayed(Duration(seconds: 2)); // 2초 대기
    setState(() {
        message = "버튼 클릭 후 변경됨!";
    });
}

ElevatedButton(
    onPressed: updateMessage,
    child: Text("클릭하세요"),
),
Text(message),

📌 2) 비동기 데이터 로딩

Future loadData() async {
    await Future.delayed(Duration(seconds: 3));
    return "데이터 로드 완료!";
}

void fetchData() async {
    String result = await loadData();
    setState(() {
        message = result;
    });
}

ElevatedButton(
    onPressed: fetchData,
    child: Text("데이터 가져오기"),
),
Text(message),

---

6. 카드 게임 프로젝트에 비동기 적용

이제 실전 프로젝트에서 짝 맞추기 카드 게임의 비동기 처리를 구현합니다.

📌 1) 2초 후 카드 자동 뒤집기

void checkMatch(int secondCardIndex) async {
    if (cardNumbers[firstCardIndex] == cardNumbers[secondCardIndex]) {
        print("짝이 맞습니다!");
    } else {
        await Future.delayed(Duration(seconds: 2)); // 2초 대기
        setState(() {
            isFlipped[firstCardIndex] = false;
            isFlipped[secondCardIndex] = false;
        });
    }
    firstCardIndex = -1;
}

---

7. 결론

• 동기(Synchronous)는 순차적으로 실행되며, 하나의 작업이 끝나야 다음 작업이 시작됨.
• 비동기(Asynchronous)는 여러 작업을 동시에 실행할 수 있으며, async & await을 사용하여 제어할 수 있음.
• Flutter에서 비동기를 활용하면 API 호출, 애니메이션, 타이머 등을 효율적으로 처리할 수 있음.

다음 시간에는 Flutter에서 상태 관리를 최적화하는 위젯 트리 개념을 배워보겠습니다! 🚀