[flutter] 플러터 훅 위젯과 상호작용하는 API 연동 방법

21 Dec 2023

flutter

플러터(Flutter)에서 훅(Hook) 위젯을 사용하여 상호작용하는 API를 연동하는 방법에 대해 알아보겠습니다.

1. 플러터 훅(Hook) 위젯이란?

플러터 훅(Hook) 위젯은 상태 관리 및 상호작용을 간편하게 할 수 있는 방법을 제공합니다. 이를 통해 복잡한 상태 관리 로직을 간소화하고 효율적으로 코드를 작성할 수 있습니다.

2. API 연동을 위한 패키지 설치

플러터에서 API를 연동하기 위해서는 http 패키지를 설치해야 합니다. 다음 명령을 사용하여 패키지를 설치합니다.

flutter pub add http

3. API 연동 예시

다음은 http 패키지를 사용하여 API를 호출하는 간단한 예시입니다.

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

Future<void> fetchUserData() async {
  final response = await http.get(Uri.parse('https://api.example.com/user'));
  if (response.statusCode == 200) {
    Map<String, dynamic> userData = json.decode(response.body);
    // API에서 받아온 데이터 활용
  } else {
    throw Exception('Failed to load user data');
  }
}

위 예시에서는 http.get 메서드를 이용하여 API를 호출하고, 응답을 확인한 후 데이터를 활용하고 있습니다.

4. 상호작용을 위한 훅(Hook) 위젯 사용

상호작용을 위해 useEffect나 useState와 같은 훅(Hook) 위젯을 사용하여 API 연동 로직을 구현할 수 있습니다. 예를 들어, 데이터를 받아와서 화면에 표시하는 경우 useState를 사용하여 상태를 관리하고, useEffect를 이용하여 API를 호출하고 데이터를 가져올 수 있습니다.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void MyWidget() {
  final userData = useState<Map<String, dynamic>>(null);

  useEffect(() {
    fetchUserData().then((data) {
      userData.value = data;
    });
  }, []);
  
  return userData.value != null
    ? Text('User Name: ${userData.value['name']}')
    : CircularProgressIndicator();
}

Future<Map<String, dynamic>> fetchUserData() async {
  final response = await http.get(Uri.parse('https://api.example.com/user'));
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load user data');
  }
}

위 코드에서 useState를 사용하여 userData 상태를 관리하고, useEffect를 이용하여 화면이 로드될 때 API를 호출하여 userData 값을 업데이트하고 있습니다.

요약

플러터 훅(Hook) 위젯을 사용하여 API와 상호작용하는 방법에 대해 알아보았습니다. http 패키지를 사용하여 API를 호출하고, useState와 useEffect를 이용하여 데이터를 관리하고 화면에 표시할 수 있습니다.

이를 통해 효율적인 상태 관리와 API 연동을 간편하게 수행할 수 있습니다.

참고: