플러터에서 콜백 함수란? 이해하고 활용하기

 

콜백 함수란?

프로그래밍에서 콜백 함수(callback function)는 특정 이벤트나 조건이 발생했을 때 호출되는 함수입니다.

플러터(Flutter)에서도 콜백 함수는 UI 요소나 비동기 작업에서 중요한 역할을 합니다.

예를 들어, 버튼을 클릭했을 때 특정 동작을 수행하거나, 비동기 작업이 완료되었을 때 후속 작업을 처리하는 데 사용됩니다.

이번 포스트에서는 콜백 함수의 개념을 쉽게 이해하고, 플러터에서 어떻게 사용하는지 예제와 함께 알아보겠습니다.

---

목차

1. 콜백 함수란?
2. 플러터에서 콜백 함수의 중요성
3. 콜백 함수의 기본 사용법
4. 예제: 버튼 클릭 이벤트
5. 예제: 비동기 작업과 콜백 함수
6. 마무리

---

1. 콜백 함수란? 

콜백 함수는 다른 함수에 인수로 전달되는 함수입니다.

특정 이벤트가 발생했을 때, 이 전달된 함수가 호출됩니다.

이러한 구조는 비동기 작업이나 이벤트 기반 프로그래밍에서 매우 유용합니다.

2. 플러터에서 콜백 함수의 중요성

플러터에서는 사용자 인터페이스와 상호작용하는 데 있어 콜백 함수가 자주 사용됩니다.

예를 들어, 버튼을 클릭하거나 텍스트 입력이 변경될 때마다 특정 동작을 수행하고 싶다면, 콜백 함수를 활용해야 합니다.

이러한 이벤트 처리 메커니즘은 사용자 경험을 강화하고 앱의 동작을 유연하게 제어할 수 있게 합니다.

3. 콜백 함수의 기본 사용법 

플러터에서 콜백 함수는 위젯의 속성으로 전달됩니다.

주로 onPressed, onChanged, onTap 등과 같은 이름으로 사용됩니다.

콜백 함수는 보통 익명 함수(람다 표현식)나 기존의 명명된 함수를 사용할 수 있습니다.

void myFunction() {
  print("Button clicked!");
}

ElevatedButton(
  onPressed: myFunction,
  child: Text("Click me"),
)

위 코드에서 onPressed는 버튼이 클릭되었을 때 myFunction을 호출하는 콜백 함수입니다.

4. 예제: 버튼 클릭 이벤트

아래는 버튼 클릭 시 콜백 함수를 사용하는 간단한 예제입니다.

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 StatelessWidget {
  void _handleButtonClick() {
    print("Button clicked!");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("콜백 함수 예제"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _handleButtonClick, // 콜백 함수 등록
          child: Text("클릭하세요"),
        ),
      ),
    );
  }
}

이 예제에서 버튼을 클릭하면 _handleButtonClick 함수가 호출되어 콘솔에 "Button clicked!"라는 메시지가 출력됩니다.

5. 예제: 비동기 작업과 콜백 함수

콜백 함수는 비동기 작업에서도 유용합니다.

예를 들어, API 호출 후 데이터를 가져와 화면에 표시하는 경우 콜백 함수를 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyAsyncPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("비동기 콜백 예제"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            fetchData((data) {
              print(data);
            });
          },
          child: Text("데이터 가져오기"),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyAsyncPage(),
  ));
}

위 코드에서 fetchData 함수는 2초 후에 주어진 콜백 함수를 호출합니다.

버튼을 클릭하면 "데이터 가져오기 완료!"라는 메시지가 출력됩니다.

6. 마무리

콜백 함수는 플러터에서 이벤트 처리와 비동기 작업에 필수적인 요소입니다.

이를 통해 다양한 사용자 상호작용을 처리하고, 비동기 작업이 완료된 후 특정 작업을 수행할 수 있습니다.

이번 포스트가 플러터에서 콜백 함수를 이해하고 사용하는 데 도움이 되길 바랍니다.

더 많은 질문이나 궁금한 점이 있다면 댓글로 알려주세요!

 

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

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