[flutter] 플러터에서 훅(hook)을 활용하여 서버 API 요청 후 데이터 표시하기

14 Dec 2023

flutter

플러터(Flutter)에서 훅(hook)을 활용하여 서버 API 요청을 보내고 데이터를 표시하는 방법을 알아보겠습니다.

훅 소개

훅(Hook) 은 함수 컴포넌트에서 React에서의 상태와 라이프사이클 기능을 “훅”하여 사용할 수 있게 해주는 기능입니다. 이를 통해 자바스크립트 함수 컴포넌트에서 상태를 사용할 수 있게 되었고, 코드를 더 간결하게 작성할 수 있게 되었습니다.

플러터에서의 훅

플러터(Flutter)에서는 flutter_hooks 라이브러리를 통해 훅을 사용할 수 있습니다. 사용자 정의 훅을 만들고, 상태를 관리하며, 코드를 간결하게 작성할 수 있는 장점을 가지고 있습니다.

서버 API 요청하기

먼저, http 패키지를 사용하여 서버 API 요청 함수를 작성합니다.

예제:

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

Future fetchData() async {
  final response = await http.get('https://api.example.com/data');
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to load data');
  }
}

데이터 표시하기

이제, 플러터의 useEffect 훅을 사용하여 API 요청을 보내고 데이터를 가져온 후 화면에 표시합니다.

예제:

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final data = useState('');

    useEffect(() {
      fetchData().then((result) {
        data.value = result;
      });
    }, const []);

    return Scaffold(
      appBar: AppBar(
        title: Text('플러터 훅을 활용한 데이터 표시'),
      ),
      body: Center(
        child: Text(data.value),
      ),
    );
  }
}

위 예제에서는 useEffect 훅을 사용하여 데이터를 가져와 화면에 표시하고 있습니다.

이제 플러터에서 훅을 활용하여 서버 API 요청을 보내고 데이터를 표시하는 방법을 알아보았습니다.

관련 레퍼런스: flutter_hooks, http package

목차

훅 소개

플러터에서의 훅

서버 API 요청하기

데이터 표시하기