플러터에서 Void Callback을 쉽게 이해하고 사용하는 방법! 초보자를 위한 완벽 가이드

플러터에서 Void Callback 쉽게 이해하기

안녕하세요, 여러분! 오늘은 Flutter에서 자주 사용되는 Void Callback에 대해 알아볼게요.

개발을 시작하면서 가장 처음 접하게 되는 개념 중 하나지만, 그 개념을 바로 이해하기 쉽지 않은데요.

특히 초보 개발자 분들께 Void Callback은 단순해 보여도 "왜 필요할까?" 하는 궁금증을 남기곤 합니다.

이번 포스팅에서는 Void Callback의 의미와 Flutter에서 쉽게 사용하는 방법을 코드와 함께 자세히 설명드릴게요!

1. Void Callback이란?

Void Callback이란, 아무 값도 반환하지 않는 함수 타입을 말해요.

void는 "아무것도 반환하지 않는다"는 뜻이고, Callback은 특정 조건이나 이벤트가 발생할 때 호출되는 함수를 뜻합니다.

예를 들어, 버튼을 누르면 특정 함수가 실행되도록 하고 싶을 때 이 Void Callback을 사용할 수 있어요.

즉, Void Callback을 사용하면 "버튼을 누르면 어떤 기능이 실행되도록" 설정할 수 있답니다.

Flutter에서 버튼, 터치 등 이벤트를 처리할 때 아주 자주 쓰여요.

2. 왜 Void Callback을 사용할까요?

Void Callback을 사용하면 UI 위젯에 동작을 추가하는 것이 매우 쉬워집니다.

특정 UI 요소가 클릭됐을 때나 어떤 이벤트가 발생했을 때 실행될 함수(콜백 함수)를 전달해 원하는 동작을 설정할 수 있기 때문이죠.

이렇게 하면 코드를 더 재사용 가능하게 만들 수 있어요.

3. Void Callback 코드 예제와 설명

이제 Void Callback을 코드로 어떻게 사용하는지 알아볼게요. 버튼을 눌렀을 때 콘솔에 "버튼이 눌렸습니다!"라는 메시지가 출력되는 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Void Callback Example'),
        ),
        body: Center(
          child: MyButton(
            onPressed: () {
              print('버튼이 눌렸습니다!');
            },
          ),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final VoidCallback onPressed; // VoidCallback 타입의 변수 선언

  MyButton({required this.onPressed}); // 생성자에서 onPressed를 받도록 설정

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed, // 버튼이 눌리면 onPressed 함수가 호출됨
      child: Text('눌러보세요!'),
    );
  }
}

1. main() 함수: Flutter 앱의 시작점입니다. MyApp이라는 최상위 위젯을 실행해요.
2. MyApp 클래스: 앱의 기본 레이아웃을 설정합니다. Scaffold 위젯을 사용해 기본 화면 구조를 만들고, 중앙에 MyButton이라는 커스텀 버튼을 배치합니다.
3. MyButton 클래스: MyButton은 VoidCallback을 받는 커스텀 버튼 위젯이에요. 이 위젯은 onPressed라는 매개변수를 받아, 버튼이 눌렸을 때 onPressed에 전달된 함수가 실행되도록 합니다.
4. VoidCallback: VoidCallback은 Flutter에서 아무 값도 반환하지 않고 매개변수도 받지 않는 함수 타입입니다. 여기서는 onPressed 매개변수로 VoidCallback 타입의 함수를 받아 버튼이 눌렸을 때 호출해요.

4. Void Callback의 장점

• 코드 재사용성 증가: Void Callback을 사용하면 다양한 함수나 동작을 전달할 수 있어서 다양한 상황에 맞춰 쉽게 사용할 수 있어요.
• 가독성 향상: 함수와 UI의 동작을 분리해 코드가 더 깔끔해지고 유지보수가 쉬워져요.
• 이벤트 핸들링이 편리: 버튼이나 이벤트 발생 시 원하는 동작을 직접 설정할 수 있어 UI가 더 동적으로 변해요.

5. 응용 예제: 텍스트 변경하기

이번엔 버튼을 눌렀을 때 화면의 텍스트가 바뀌는 예제를 만들어 볼게요. 여기서도 Void Callback을 사용해요!

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String displayText = "여기를 눌러보세요!"; // 화면에 보여질 텍스트

  void changeText() { // 텍스트를 변경하는 함수
    setState(() {
      displayText = "텍스트가 변경되었습니다!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Change Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(displayText, style: TextStyle(fontSize: 20)), // 텍스트 표시
              SizedBox(height: 20),
              MyButton(onPressed: changeText), // 버튼에 changeText 함수 연결
            ],
          ),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final VoidCallback onPressed;

  MyButton({required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text('버튼 눌러서 텍스트 변경!'),
    );
  }
}

 

1. displayText: 초기 텍스트는 "여기를 눌러보세요!"로 설정됩니다.
2. changeText() 함수: 버튼을 눌렀을 때 displayText의 내용을 "텍스트가 변경되었습니다!"로 바꾸는 함수입니다. setState()를 통해 UI가 업데이트됩니다.
3. MyButton 위젯: onPressed에 changeText 함수를 전달받아 버튼을 누르면 displayText가 변경되게 만듭니다.

Flutter에서 Void Callback은 UI와 이벤트를 연결할 때 아주 유용한 도구입니다.

특히 버튼이나 특정 동작을 설정하고 싶을 때 많이 사용되는데, 이 기능을 통해 더 유연하고 재사용성 높은 코드를 작성할 수 있어요.

Flutter 앱 개발의 기초 개념이자 필수 요소이니, 꼭 이해하고 여러 번 연습해 보세요!

 

Void Callback을 통해 Flutter 앱 개발이 더 즐겁고 효율적이길 바랍니다.

Flutter의 기본 개념을 잘 이해하고 나면 더 복잡한 앱을 개발하는 데 큰 도움이 될 거예요.

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

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

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