📌 Day 18: Flutter JSON 데이터 처리 (jsonDecode, jsonEncode)

 
Flutter에서 서버와 데이터를 주고받을 때 JSON 형식은 기본입니다.

 
API 연동은 Flutter 앱에서 필수 기능입니다.
서버에서 받은 데이터는 대부분 JSON 형식이며,
이를 Dart에서 다루기 위해선 변환 과정이 반드시 필요합니다.
 
그때 사용하는 함수가 바로 jsonDecode()입니다.
 
💡 실무에서는 로그인 정보, 사용자 프로필, 게시글 목록, 댓글 등 모든 데이터를 JSON으로 주고받습니다. API 응답은 jsonDecode, 요청은 jsonEncode가 핵심이며, 실제 Dio나 http 패키지에서도 이 함수들이 많이 사용됩니다.
 
http 패키지 관련 글 ⇒ https://steadybuilder.tistory.com/95

📌 Day 16: Flutter HTTP 패키지를 활용한 API 요청 (GET, POST, Json 데이터 처리, FutureProvider<

 
Dio 패키지 관련 글 ⇒ : https://steadybuilder.tistory.com/96

📌 Day 17: Dio + Riverpod 완벽 활용 가이드! (Flutter API 통신 실전 패턴 총정리)

 
 
 
 

📌 jsonDecode

 
🔸 1. JSON 문자열을 Dart 객체로 변환하는 이유
 
서버에서 받아오는 데이터는 대부분 JSON 형식의 문자열입니다.
하지만 Dart에서는 문자열만으로 데이터를 다룰 수 없기 때문에,
이 문자열을 Dart의 Map 또는 List 형태로 변환해서 변수에 저장하고 활용할 수 있도록 만들어야 합니다.
 
 
 
 
 

---

🔸 2. jsonDecode 사용 예제 (main 포함)

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

void main() {
  runApp(const MaterialApp(
    home: JsonDecodeExample(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    // JSON 형식의 문자열을 하나 정의합니다.
    const jsonString = '{"name": "SteadyBuilder", "age": 99, "job": "developer"}';

    // 문자열을 Dart의 Map 형태로 변환합니다.
    final Map<String, dynamic> userMap = jsonDecode(jsonString);

    // 변환된 Map에서 필요한 데이터를 꺼냅니다.
    final name = userMap['name'];
    final age = userMap['age'];
    final job = userMap['job'];

    return Scaffold(
      appBar: AppBar(title: const Text('📥 jsonDecode 예제')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          '이름: $name\\n나이: $age\\n직업: $job',
          style: const TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

 
 
 
 
 
 

---

🔸 3. 예제 코드 상세 설명

import 'dart:convert';

☑ jsonDecode()와 jsonEncode()를 사용하려면 dart:convert 패키지를 import해야 합니다.
☑ 이 패키지는 JSON 데이터를 Dart에서 처리할 수 있도록 도와주는 기능을 모아놓은 라이브러리입니다.

---

const jsonString = '{"name": "SteadyBuilder", "age": 99, "job": "developer"}';

☑ 이 문자열은 서버에서 받아온 JSON 데이터라고 가정합니다.
☑ 내부 구조는 key와 value로 구성된 JSON 객체입니다.

---

final Map<String, dynamic> userMap = jsonDecode(jsonString);

☑ 여기에서 핵심은 jsonDecode() 함수입니다.
☑ 이 함수는 JSON 문자열을 Dart에서 다룰 수 있는 Map 또는 List 형태로 변환해줍니다.
☑ 왜 Map으로 변환할까요?

• JSON의 구조가 { key: value }이기 때문에, Dart의 Map과 구조가 같습니다.
• 따라서 데이터를 효율적으로 꺼내 쓰기 위해 Map으로 변환하는 것이 가장 자연스럽습니다.

☑ Map<String, dynamic>을 사용하는 이유는?

• JSON의 key는 대부분 문자열(String)입니다.
• 하지만 value는 숫자, 문자열, 리스트, 불리언 등 다양한 타입이 될 수 있으므로 dynamic을 사용합니다.

---

final name = userMap['name'];
final age = userMap['age'];
final job = userMap['job'];

☑ 변환된 Map에서 name, age, job 값을 꺼냅니다.
☑ key를 문자열로 지정하면 해당 value가 반환됩니다.
☑ 이처럼 쉽게 각각의 데이터를 접근할 수 있어 JSON을 Map으로 변환하는 것이 유용한 이유입니다.

---

return Scaffold( ... Text(...) );

☑ 이제 가져온 데이터를 Text 위젯을 이용해 화면에 출력합니다.
☑ JSON 데이터를 Dart Map으로 변환하고, 그 데이터를 UI에 바로 연결한 예제입니다.
 
 
 
 
 

---

🔸 4. 요약

• JSON은 서버와 통신할 때 가장 많이 사용하는 데이터 형식입니다.
• jsonDecode()를 사용하면 문자열을 Dart Map 또는 List로 바꿀 수 있습니다.
• Map으로 바꾸면 Flutter 앱 내부에서 쉽게 데이터를 꺼내 사용할 수 있습니다.
• 타입이 복합적일 수 있으므로 Map<String, dynamic>으로 정의하는 것이 일반적입니다.

 
 
 
 

---

📌 jsonEncode

앞에서는 JSON 문자열을 Dart의 Map 객체로 변환하는 방법을 배웠습니다.
이번에는 그 반대로, Dart의 Map이나 List 같은 객체를 JSON 문자열로 변환하는 방법을 알아봅니다.
서버에 데이터를 보낼 때 사용되며, POST 요청 등에 꼭 필요합니다.
 
 
 
 
 

---

🔸 1. Dart 객체를 JSON 문자열로 바꾸는 이유
Flutter에서 서버로 데이터를 보낼 때는
텍스트 기반인 JSON 문자열 형식으로 만들어서 보내야 합니다.
Dart에서 작성한 Map이나 List를 서버가 이해하려면
**jsonEncode()**를 사용해 문자열로 변환해주는 과정이 필요합니다.
 
 
 
 
 

---

🔸 2. jsonEncode 사용 예제 (main 포함)

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

void main() {
  runApp(const MaterialApp(
    home: JsonEncodeExample(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    // Dart에서 만든 Map 데이터
    final Map<String, dynamic> user = {
      'name': 'SteadyBuilder',
      'age': 99,
      'job': 'developer',
    };

    // Map을 JSON 문자열로 변환
    final String jsonString = jsonEncode(user);

    return Scaffold(
      appBar: AppBar(title: const Text('📤 jsonEncode 예제')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          '변환된 JSON 문자열:\\n\\n$jsonString',
          style: const TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

 
 
 
 
 
 

---

🔸 3. 예제 코드 상세 설명

final Map<String, dynamic> user = {
  'name': 'SteadyBuilder',
  'age': 99,
  'job': 'developer',
};

☑ Dart에서 하나의 사용자 정보를 Map 형태로 만듭니다.
☑ key는 문자열이고, value는 다양한 타입(String, int)이라서 dynamic을 사용합니다.

---

final String jsonString = jsonEncode(user);

☑ jsonEncode()는 Dart 객체를 JSON 문자열로 변환하는 함수입니다.
☑ 이 함수가 반환하는 결과는 서버에 전송 가능한 텍스트 형식입니다.
☑ 서버에 POST 요청을 보낼 때 body: jsonEncode(user) 이런 식으로 활용하게 됩니다.

---

Text('변환된 JSON 문자열:\\n\\n$jsonString')

☑ 변환된 JSON 문자열을 화면에 보여줍니다.
☑ 결과는 이런 형태로 표시됩니다:

변환된 JSON 문자열:

{"name":"SteadyBuilder","age":99,"job":"developer"}

 
 
 
 
 
 

---

🔸 4. jsonEncode는 언제 쓰나?

사용 상황	예
서버에 데이터 전송	로그인 정보, 새 게시글, 댓글 등
로컬 저장소에 저장	설정 값, 유저 정보 등
디버깅 시 보기 쉽게 출력	콘솔에 JSON 문자열로 확인할 때

 
 
 
 
 
 

---

🔸 5. 요약

• jsonEncode()는 Dart 객체(Map, List 등)를 JSON 문자열로 변환합니다.
• 서버로 데이터를 보낼 때 반드시 필요한 과정입니다.
• jsonDecode()와 반대 개념으로 이해하면 좋습니다.

 
 
 
 

---

📌 JSON 데이터가 많다면 ?

JSON 리스트 .map()으로 처리하여 화면에 출력하기
 
 
 
 
 

---

🔸 1. 예제 개요

• 서버에서 받아온 JSON 문자열에는 여러 개의 사용자 정보가 담겨 있습니다.
• 이 데이터를 Flutter 앱 화면에 리스트로 출력해봅니다.
• 반복 처리에는 .map()을 사용합니다.

 
 
 
 
 

---

🔸 2. 전체 코드 예제 (main 포함)

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

void main() {
  runApp(const MaterialApp(
    home: JsonListViewExample(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    // JSON 형식의 문자열: 사용자 10명의 정보
	 const jsonString = '''
	[
	  {"name": "Alice Kim", "age": 27, "job": "Frontend Developer"},
	  {"name": "Bob Lee", "age": 34, "job": "UI/UX Designer"},
	  {"name": "Charlie Park", "age": 29, "job": "Project Manager"},
	  {"name": "Diana Choi", "age": 32, "job": "Mobile Developer"},
	  {"name": "Ethan Jung", "age": 41, "job": "QA Tester"},
	  {"name": "Fiona Lim", "age": 25, "job": "AI Researcher"},
	  {"name": "George Han", "age": 38, "job": "DevOps Engineer"},
	  {"name": "Hannah Yoo", "age": 30, "job": "Product Owner"},
	  {"name": "Ian Seo", "age": 36, "job": "Data Analyst"},
	  {"name": "Julia Kang", "age": 28, "job": "Fullstack Developer"}
	]
	''';

    // 문자열을 List<Map<String, dynamic>> 형태로 변환
    final List<dynamic> userList = jsonDecode(jsonString);

    return Scaffold(
      appBar: AppBar(title: const Text('👥 사용자 목록(JSON 리스트)')),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: userList.map<Widget>((user) {
          final name = user['name'];
          final age = user['age'];
          final job = user['job'];

          return Card(
            margin: const EdgeInsets.only(bottom: 12),
            child: ListTile(
              leading: const Icon(Icons.person),
              title: Text(name, style: const TextStyle(fontWeight: FontWeight.bold)),
              subtitle: Text('나이: $age, 직업: $job'),
            ),
          );
        }).toList(),
      ),
    );
  }
}

 
 
 
 
 
 

---

🔸 3. 예제 코드 상세 설명

const jsonString = '''[{"name": "..."}]''';

☑ 서버에서 받은 데이터라고 가정한 JSON 문자열입니다.
☑ 배열 형태로 10명의 사용자가 담겨 있습니다.

---

final List<dynamic> userList = jsonDecode(jsonString);

☑ 문자열을 Dart의 List 객체로 변환합니다.
☑ 내부의 각 요소는 Map 형태이므로, List<Map<String, dynamic>>처럼 다룰 수 있습니다.

---

userList.map<Widget>((user) {
  ...
}).toList()

☑ .map() 함수를 사용하여 각 사용자 정보를 Widget으로 바꿉니다.
☑ .toList()를 붙이면 이 결과를 List<Widget>으로 변환하여 ListView에 전달할 수 있습니다.

---

Card(
  child: ListTile(
    title: Text(name),
    subtitle: Text('나이: $age, 직업: $job'),
  ),
)

☑ 사용자 정보를 한 줄씩 보기 좋게 표현한 UI입니다.
☑ ListTile은 Flutter에서 많이 쓰는 리스트 아이템 위젯입니다.
 
 
 
 
 

---

📌 정리 요약

• 여러 개의 JSON 데이터를 화면에 보여줄 때는 .map()을 사용하여 위젯으로 변환합니다.
• ListView(children: [...]) 패턴과 함께 쓰면 아주 자연스럽고 깔끔한 코드가 됩니다.
• 실무에서도 .map().toList()는 매우 흔하게 사용되는 방식이라고 합니다.