fromJson 생성자

Coddy Flutter 여정의 데이터와 네트워크 섹션에 포함된 레슨. 27개 중 17번째.

화면 곳곳에서 user['name'] as String을 읽으면 코드가 복잡해지고, 키에 오타가 하나만 있어도 문제가 생깁니다. 일반적인 해결 방법은 데이터를 위한 클래스를 만들고, JSON을 처리하는 생성자를 하나 두는 것입니다. 이 생성자를 fromJson이라고 합니다:

class User {
  User({required this.name, required this.age});

  final String name;
  final int age;

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'] as String,
      age: json['age'] as int,
    );
  }
}

User.fromJson은 명명 생성자로, User를 만드는 두 번째 방법입니다. factory를 사용하면 생성자에서 코드를 실행하고 생성한 객체를 return할 수 있습니다. 일반 생성자는 아무것도 return할 수 없습니다.

이제 JSON을 한 곳에서 읽습니다. 앱의 나머지 부분에서는 실제 User 객체를 사용하며, 여기서 user.name은 String이고, 오타가 있으면 null이 되는 대신 컴파일 오류가 발생합니다:

final body = await fetch('/user');
return User.fromJson(jsonDecode(body));

서버와 통신하는 거의 모든 앱에는 수신하는 데이터 종류마다 fromJson이 있습니다.

챌린지

어려움

프로필에 Unknown이라고 표시됩니다. loadUser가 JSON을 무시합니다. User에 factory User.fromJson(Map<String, dynamic> json)을 추가하여 name, email, age를 읽고, loadUser가 User.fromJson(jsonDecode(body))을 반환하도록 하세요. dart:convert를 가져오세요.

직접 해보기

import 'package:flutter/material.dart';

import 'api.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

class ProfileScreen extends StatefulWidget {
  const ProfileScreen({super.key});

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late Future<User> _user;

  @override
  void initState() {
    super.initState();
    _user = loadUser();
  }

  Future<User> loadUser() async {
    final body = await fetch('/user');
    print(body);
    return User(name: 'Unknown', email: 'unknown', age: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: FutureBuilder<User>(
          future: _user,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Could not load: ${snapshot.error}');
            }
            if (snapshot.hasData) {
              final user = snapshot.data!;
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    user.name,
                    style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  Text(user.email, style: const TextStyle(fontSize: 18)),
                  const SizedBox(height: 8),
                  Text('${user.age} years old'),
                ],
              );
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

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

  final String name;
  final String email;
  final int age;
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

데이터와 네트워크의 모든 레슨

직접 연습해 보세요: 온라인 Flutter 컴파일러