Flutter의 데이터 모델링(Data Modeling) 사용법

데이터 모델링(Data Modeling)은 애플리케이션에서 데이터를 구조화하고 관리하는 중요한 과정입니다. Flutter 애플리케이션에서 서버로부터 데이터를 받아오거나, 데이터베이스에서 정보를 가져올 때 데이터를 구조화하는 것은 필수적입니다. 데이터 모델링을 통해 데이터를 더 직관적이고 효율적으로 처리할 수 있습니다. 이번 글에서는 Flutter에서 데이터 모델링을 구현하는 방법을 단계별로 설명하겠습니다.

1. 데이터 모델링이란?

데이터 모델링은 애플리케이션에서 사용할 데이터를 구조화하는 과정입니다. 데이터를 구조화하는 이유는 주로 다음과 같습니다.

• 데이터 처리의 일관성 유지: 데이터를 구조화하여 통일된 방식으로 데이터를 처리할 수 있습니다.
• 유지보수 용이성: 모델링된 데이터를 사용하면 코드의 가독성과 유지보수성이 높아집니다.
• 유효성 검증: 데이터 모델을 통해 받아온 데이터의 유효성을 검증하고, 불필요한 데이터나 오류를 방지할 수 있습니다.

Flutter에서 데이터 모델은 주로 클래스로 표현되며, JSON 데이터를 Dart 객체로 변환하거나, 데이터를 객체로 다루기 위해 사용됩니다.

2. 데이터 모델 생성

Flutter에서 데이터 모델은 서버나 로컬 데이터베이스에서 받아온 JSON 데이터를 Dart 객체로 변환하는 과정을 포함합니다. 이 과정을 통해 데이터를 구조화하고 쉽게 다룰 수 있습니다.

2.1 간단한 데이터 모델 예제

예를 들어, 아래와 같은 사용자(User) 데이터를 서버에서 받아왔다고 가정해 봅시다.

{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}

이 데이터를 모델링하려면 User라는 클래스를 생성할 수 있습니다.

class User {
  final int id;
  final String name;
  final String email;

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

  // JSON 데이터를 Dart 객체로 변환하는 팩토리 메서드
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }

  // Dart 객체를 JSON 형식으로 변환하는 메서드
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}

• fromJson: 서버에서 받아온 JSON 데이터를 Dart 객체로 변환하는 메서드입니다.
• toJson: Dart 객체를 JSON 형식으로 변환하여 서버로 전송하거나 로컬에 저장할 때 사용됩니다.

728x90

 

3. JSON 데이터를 Dart 객체로 변환하기

서버에서 받아온 JSON 데이터를 Dart 객체로 변환하는 것은 데이터 모델링의 핵심입니다. http 패키지를 사용하여 REST API에서 데이터를 받아오고, 이를 fromJson 메서드를 통해 모델로 변환하는 방법을 살펴보겠습니다.

3.1 JSON 데이터를 받아와 모델로 변환하는 예제

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

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) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }

  Map<string, dynamic=""> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}

class UserService {
  Future<list> fetchUsers() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

    if (response.statusCode == 200) {
      List jsonData = jsonDecode(response.body);
      return jsonData.map((json) => User.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load users');
    }
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
  late Future<list> _users;

  @override
  void initState() {
    super.initState();
    _users = UserService().fetchUsers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Data')),
      body: FutureBuilder<list>(
        future: _users,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index].name),
                  subtitle: Text(snapshot.data![index].email),
                );
              },
            );
          } else {
            return Center(child: Text('No data available'));
          }
        },
      ),
    );
  }
}
</list</list</list</string,></string,>

위 코드는 서버에서 JSON 형식으로 사용자 데이터를 가져와, Dart 객체로 변환하여 화면에 표시하는 예제입니다.

• UserService: API 요청을 처리하고 JSON 데이터를 받아와 User 객체로 변환하는 서비스 클래스입니다.
• FutureBuilder: 비동기적으로 데이터를 로드하고, 상태에 따라 UI를 업데이트하는 데 사용됩니다.

 

반응형

 

4. 복잡한 데이터 모델링

실제로 서버에서 받아오는 데이터는 여러 개의 객체나 중첩된 구조를 가질 수 있습니다. 이러한 경우 복잡한 데이터 모델링이 필요합니다. 중첩된 JSON 데이터를 처리하는 방법을 살펴보겠습니다.

4.1 중첩된 JSON 데이터 모델링 예제

다음과 같은 중첩된 JSON 데이터를 받아온다고 가정해 봅시다.

{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com",
  "address": {
    "city": "New York",
    "zipcode": "10001"
  }
}

Address라는 새로운 클래스를 추가하고, User 클래스에서 이를 사용하여 모델링할 수 있습니다.

class Address {
  final String city;
  final String zipcode;

  Address({
    required this.city,
    required this.zipcode,
  });

  factory Address.fromJson(Map<String, dynamic> json) {
    return Address(
      city: json['city'],
      zipcode: json['zipcode'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'city': city,
      'zipcode': zipcode,
    };
  }
}

class User {
  final int id;
  final String name;
  final String email;
  final Address address;

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

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
      address: Address.fromJson(json['address']),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
      'address': address.toJson(),
    };
  }
}

위 예제에서는 Address 클래스와 User 클래스 간의 관계를 설정하여 중첩된 데이터를 처리합니다.

• Address 클래스: 사용자 주소 데이터를 처리하는 새로운 클래스입니다.
• User 클래스: Address 객체를 포함하여 중첩된 데이터를 처리합니다.

5. 데이터 유효성 검사

데이터 모델을 사용할 때는 데이터의 유효성을 검증하는 것이 중요합니다. 잘못된 형식이나 누락된 데이터가 들어오는 것을 방지하기 위해 각 필드를 검증하는 로직을 추가할 수 있습니다.

5.1 간단한 데이터 유효성 검증

factory User.fromJson(Map<String, dynamic> json) {
  if (json['id'] == null || json['name'] == null || json['email'] == null) {
    throw Exception('Invalid user data');
  }

  return User(
    id: json['id'],
    name: json['name'],
    email: json['email'],
    address: Address.fromJson(json['address']),
  );
}

위 코드에서는 fromJson 메서드 내에서 필수 필드들이 존재하는지 확인하고, 데이터가 누락되면 예외를 발생시

킵니다.

6. 데이터 모델과 상태 관리

Flutter에서 데이터 모델은 상태 관리와 함께 사용될 수 있습니다. 예를 들어, Provider, Riverpod, Bloc 같은 상태 관리 도구와 데이터 모델을 결합하여 앱의 데이터를 효율적으로 관리할 수 있습니다.

6.1 Provider와 데이터 모델 사용 예제

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

class UserProvider with ChangeNotifier {
  User? user;

  void setUser(User newUser) {
    user = newUser;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => UserProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserProvider>(context);

    return Scaffold(
      appBar: AppBar(title: Text('User Data')),
      body: Center(
        child: userProvider.user == null
            ? Text('No user data available')
            : Text('User: ${userProvider.user!.name}'),
      ),
    );
  }
}

위 코드는 Provider를 사용하여 데이터 모델을 상태 관리와 결합하는 예제입니다.

결론

Flutter에서 데이터 모델링은 데이터를 구조화하고, 서버로부터 받아온 JSON 데이터를 Dart 객체로 변환하는 중요한 과정입니다. 데이터 모델을 사용하면 코드의 유지보수성이 높아지고, 데이터의 유효성을 검증할 수 있습니다. 중첩된 데이터 구조와 유효성 검증을 처리하는 방법을 익히고, 상태 관리 도구와 결합하여 효율적인 데이터 관리를 구현할 수 있습니다. 이번 글에서 설명한 방법을 통해 Flutter 애플리케이션에서 데이터 모델링을 활용해보세요.