오늘은 숙련 강의를 봤다
어렵다 아기가 된 것 같다..
신생아랄까..
오늘 배운 내용은 Json.MVVM,Riverpod이다
Json과 MVVM은 이론적으로는 이해한 것 같은데
Riverpod을 사용해 코드를 작성하는 순간부터
머리가 안 돌아갔다..
어렵다..매일매일이 새롭다
Json
직렬화(Serialization): Dart 객체 → JSON 문자열 (toJson)
역직렬화(Deserialization): JSON 문자열 → Dart 객체 (fromJson)
-> 즉 toJson() / fromJson()은 객체 내부 필드 정리용
jsonEncode :
-> 앱 내부 데이터(Map 또는 객체) 를 → 문자열(JSON) 로 만들어서 네트워크로 보낼 때 쓰는 함수
jsonDecode:
-> 문자열(JSON) 을 → Dart에서 쓸 수 있는 Map으로 바꿔줍니다.
그 후 fromJson()을 써서 클래스로 옮겨 담는 거예요.
-> 즉 jsonEncode() / jsonDecode()은 문자열 변환기 (데이터 입·출력용)
순서
1. Dart 객체 → Map >> toJson()
(클래스 내부 데이터를 Map 형태로 변환)
2. Map → JSON 문자열 >> jsonEncode()
(네트워크/저장용 문자열로 변환)
3.JSON 문자열 → 저장소에 저장 >> Firebase등
(실제 저장 동작 수행)
4.저장소(DB) → JSON 문자열 >> getString(), getDoc(), query() 등
(저장된 문자열 불러오기)
5.JSON 문자열 → Map >> jsonDecode()
(문자열을 다시 Map으로 해석)
6.Map → Dart 객체 >> fromJson()
(Map의 데이터를 클래스로 복원)
[즉 Json문자열로 변환하든 Dart객체로 전환하든 Map으로 먼저 전화을 해야한다]
정리 공식
저장할 때 > 객체 ➜ JSON 문자열 > jsonEncode(object.toJson())
불러올 때 > JSON 문자열 ➜ 객체 > ClassName.fromJson(jsonDecode(jsonString))
예제
import 'dart:convert';
void main() {
String hardJson = """
{
"name": "오상구",
"age": 7,
"isMale" : true,
"favorite_foods" : ["삼겹살", "연어", "고구마"],
"contact": {
"mobile": "010-0000-0000",
"email": null
}
}
""";
final hardMap = jsonDecode(hardJson);
PetDetail petDetail = PetDetail.fromJson(hardMap);
print(petDetail.toJson());
}
class PetDetail {
String name;
int age;
bool isMale;
List<String> favoriteFoods;
Contact contact;
PetDetail({
required this.name,
required this.age,
required this.isMale,
required this.favoriteFoods,
required this.contact,
});
PetDetail.fromJson(Map<String, dynamic> map) : this(
name: map['name'],
age: map['age'],
isMale: map['isMale'],
favoriteFoods: List<String>.from(map['favorite_foods']),
contact: Contact.fromJson(map['contact']),
);
Map<String, dynamic> toJson(){
return{
'name': name,
'age' : age,
'isMale' : isMale,
'favorite_foods' : favoriteFoods,
'contact' : contact.toJson(),
};
}
}
class Contact{
String mobile;
String? email;
Contact({
required this.mobile,
required this.email,
});
Contact.fromJson(Map<String, dynamic> map) : this(
mobile: map['mobile'],
email: map['email']
);
Map<String, dynamic> toJson(){
return{
'mobile': mobile,
'email' : email,
};
}
}
MVVM
Model + View + ViewModel
(View는 UI만, Model은 데이터만, ViewModel은 둘 사이의 연결(로직 관리))
Model : 데이터를 서버 등에서 가지고 오는 계층, 데이터 클래스 그 자체도 포함
View : 화면을 구현하는 계층
ViewModel : View와 Model을 연결하는 ‘중간 관리자’
Flow(순서)
사용자 입력 (View)
↓
ViewModel (상태 변경)
↓
Model (데이터 변경)
↓
ViewModel (변경 감지)
↓
View (UI 갱신)