[flutter] 플러터 훅 위젯을 사용한 비동기 처리 방법

21 Dec 2023

flutter

플러터(Flutter)에서 상태 관리를 위해 훅(Hooks)을 사용하면 간단하게 비동기 처리를 구현할 수 있습니다. 이 포스트에서는 플러터 훅을 사용하여 비동기 작업을 처리하는 방법에 대해 알아보겠습니다.

플러터 훅이란?

Flutter Hooks은 상태 관리를 위한 플러터의 확장 패키지로, 클래스형 위젯의 문제를 해결하고 코드를 간결하게 만들어줍니다. 플러터 훅을 사용하면 useEffect, useFuture, useStream 등의 훅을 활용하여 비동기 작업을 쉽게 처리할 수 있습니다.

비동기 작업 처리하기

1. useEffect를 사용한 비동기 작업

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:http/http.dart' as http;

void exampleAsyncEffect() {
  useEffect(() {
    Future.delayed(Duration(seconds: 2), () {
      print('Async task complete!');
    });
  }, []);
}

2. useFuture를 사용한 비동기 작업

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:http/http.dart' as http;

void exampleFutureHook() {
  final future = useFuture(() {
    return http.get('https://api.example.com/data');
  });

  if (future.hasData) {
    print('Data loaded: ${future.data}');
  } else if (future.hasError) {
    print('Error: ${future.error}');
  }
}

3. useStream을 사용한 비동기 작업

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:rxdart/rxdart.dart';

void exampleStreamHook() {
  final stream = useStream(() {
    return BehaviorSubject.seeded(0).stream;
  });

  return StreamBuilder(
    stream: stream,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return Text('Data: ${snapshot.data}');
      } else {
        return CircularProgressIndicator();
      }
    },
  );
}

정리

플러터 훅을 사용하면 비동기 작업을 간편하게 처리할 수 있으며, 코드를 더욱 간결하고 읽기 쉽도록 만들어줍니다. 위의 예제를 참고하여 플러터 훅을 활용한 비동기 작업을 구현해 보세요.