JSON 읽기

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

서버는 좀처럼 평범한 문장으로 응답하지 않습니다. 서버는 JSON을 보냅니다. JSON은 이름을 따옴표로 묶고 콜론 뒤에 값을 두어 데이터를 담는 텍스트입니다. 실습용 API의 /user는 다음과 같이 응답합니다.

{
  "name": "Maya Chen",
  "email": "maya@example.com",
  "age": 28,
  "isPro": true
}

앱에서 이 데이터는 하나의 긴 String입니다. Dart의 dart:convert 라이브러리에 있는 jsonDecode는 이 텍스트를 Dart 값으로 변환합니다. 중괄호는 Map이 되고, 이름은 그 키가 됩니다.

import 'dart:convert';

final Map<String, dynamic> user = jsonDecode(body);
print(user['name']);   // Maya Chen

키는 항상 문자열입니다. 값은 텍스트, 숫자, true 또는 false, 리스트 또는 다른 맵일 수 있으므로 그 유형은 dynamic입니다. 즉, “앱이 실행되는 동안 결정되는 모든 유형”입니다. 키는 정확히 일치해야 합니다. user['Name']은 user['name']과 다르며, 존재하지 않는 키는 null을 반환합니다.

화면에서 바로 사용할 수 있는 데이터를 받도록, 응답을 가져오는 곳에서 별도의 함수로 디코딩하세요.

챌린지

중급

프로필 화면에 원시 JSON이 표시됩니다. 사람의 정보를 표시하세요:

loadUser는 Future<Map<String, dynamic>>을 반환합니다. fetch('/user')를 기다린 다음 본문을 jsonDecode로 디코딩한 결과를 반환합니다(dart:convert 가져오기).
_user와 FutureBuilder도 같은 타입을 사용합니다.
데이터가 도착하면 user['name'](크기 28, 굵게)과 그 아래에 user['email']을 표시하는 Column을 보여주세요.

직접 해보기

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<String> _user;

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

  Future<String> loadUser() async {
    return fetch('/user');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: FutureBuilder<String>(
          future: _user,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Could not load: ${snapshot.error}');
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!);
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

실력 점검

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

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

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