Retrofit 구현과 활용

Flutter에서 Retrofit을 사용하여 API를 호출하려면 retrofit 패키지와 함께 dio 패키지를 사용합니다. Retrofit은 API 호출을 위한 인터페이스를 정의하여 코드의 재사용성을 높이고, 자동으로 API 호출 코드를 생성할 수 있어 간편하게 RESTful API와 통신할 수 있습니다. 다음은 Retrofit의 구현과 활용 방법을 단계별로 설명한 예제입니다.

 

1. Retrofit 및 Dio 패키지 설치

우선 retrofit과 dio, 그리고 코드 생성에 필요한 build_runner 패키지를 설치합니다.

 

pubspec.yaml에 패키지 추가

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0
  retrofit: ^3.0.1

dev_dependencies:
  build_runner: ^2.3.3

 

2. Retrofit 인터페이스 정의

Retrofit에서 API 호출을 위한 인터페이스는 @RestApi와 @GET, @POST 등의 어노테이션을 사용해 정의합니다. 이를 통해 간단하게 API 엔드포인트와 메서드 유형을 지정할 수 있습니다.

 

예제: UserService 정의

import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';
import 'model/user.dart';

part 'user_service.g.dart';

@RestApi(baseUrl: "https://api.example.com")
abstract class UserService {
  factory UserService(Dio dio, {String baseUrl}) = _UserService;

  @GET("/users/{id}")
  Future<User> getUser(@Path("id") int id);

  @GET("/users")
  Future<List<User>> getUsers();

  @POST("/users")
  Future<User> createUser(@Body() User user);
}

• @RestApi: API 호출 인터페이스를 정의하며, baseUrl로 기본 URL을 지정합니다.
• @GET, @POST: API 메서드 유형을 지정하는 어노테이션입니다. @GET("/users/{id}")는 GET 요청으로 /users/{id} 엔드포인트에 접근하며, @Path를 사용해 id를 동적으로 전달합니다.
• @Body: @POST 메서드에서 사용할 수 있으며, 요청 본문으로 데이터를 전달합니다.

 

Retrofit 코드 생성

인터페이스 정의 후, build_runner를 통해 Retrofit 코드를 생성해야 합니다. 터미널에서 다음 명령어를 실행하여 자동 생성 코드를 만듭니다.

flutter pub run build_runner build

 

모델 클래스 정의

API와 데이터 모델 간 매핑을 위해 JSON 직렬화 가능한 모델 클래스가 필요합니다. 예제에서는 User 모델을 정의해보겠습니다.

예제: User 모델 클래스

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

• @JsonSerializable: JSON 직렬화를 자동으로 처리해주는 어노테이션입니다. build_runner를 사용하여 fromJson과 toJson 메서드를 자동 생성합니다.

이후 flutter pub run build_runner build 명령어로 직렬화 코드를 생성합니다.

 

Retrofit 클라이언트 초기화 및 활용

이제 Retrofit을 초기화하고 API를 호출하는 코드를 작성합니다.

import 'package:dio/dio.dart';
import 'user_service.dart';

class ApiService {
  final UserService _userService;

  ApiService()
      : _userService = UserService(
          Dio(BaseOptions(contentType: "application/json")),
        );

  Future<void> fetchUser(int id) async {
    try {
      final user = await _userService.getUser(id);
      print("User: ${user.name}, Email: ${user.email}");
    } catch (e) {
      print("Error fetching user: $e");
    }
  }
}

• Dio 설정: Dio의 기본 옵션을 설정하여 JSON 콘텐츠 타입을 지정하고, 필요한 경우 헤더와 인증 토큰을 추가할 수 있습니다.
• fetchUser 메서드: getUser 메서드를 호출하여 특정 사용자 정보를 가져옵니다.

 

화면에서 API 호출하기

아래는 Flutter 위젯에서 ApiService를 사용하여 데이터를 가져오는 예제입니다.

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

class UserScreen extends StatefulWidget {
  @override
  _UserScreenState createState() => _UserScreenState();
}

class _UserScreenState extends State<UserScreen> {
  final ApiService _apiService = ApiService();
  String userInfo = "Fetching user data...";

  @override
  void initState() {
    super.initState();
    _fetchUser();
  }

  Future<void> _fetchUser() async {
    try {
      final user = await _apiService.fetchUser(1);
      setState(() {
        userInfo = "User fetched successfully!";
      });
    } catch (e) {
      setState(() {
        userInfo = "Error fetching user data";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("User Data")),
      body: Center(
        child: Text(userInfo),
      ),
    );
  }
}

• initState: 위젯 초기화 시 _fetchUser를 호출하여 데이터를 가져옵니다.
• setState: 데이터를 성공적으로 가져오면 userInfo를 갱신하여 UI를 업데이트합니다.

Retrofit을 사용하면 API 호출 코드가 깔끔하고 유지보수가 쉬워지며, API 엔드포인트와 관련된 변경이 있을 때 인터페이스만 업데이트하면 됩니다. Provider와 결합하여 전역 상태 관리와 함께 사용할 수도 있고, 여러 API 호출 시 async/await와 에러 핸들링을 활용해 더욱 견고한 구조로 확장할수 있습니다.