JSON / MVVM / Riverpod_Flutter 숙련주차 5일

2026.01.09 (금)

• JSON
• MVVM
• Riverpod
  이번주 배운 내용을 토대로 오늘 과제를 시작했다. 중요한 핵심들을 다시 한번 정리해보면서 과제 시이작~!

---

오늘의 공부 이미지 💫

---

🍴 JSON

JSON은 데이터를 주고받기 위한 도구로 객체로 변환해서 사용한다

✔️ 핵심

• 직렬화: dart 객체를 JSON 문자열로 만들기 (toJson)
• 역직렬화: JSON 데이터를 dart 객체로 변환하기 (fromJson)

✔️ 사용법

모델 클래스 만들기: 데이터 담을 틀을 만들기

class User {
 final String name;
 final int age;
 
 User({required this.name, 
       required this.age,});
       
 // JSON 데이터를 Dart 객체로 변환하는 생성자
 User.fromJson(Map<String, dynamic> json)
     : name = json['name'],
       age = json['age'];
       
  // Dart 객체를 JSON으로 변환하는 메서드
  Map<String, dynamic> toJson() => {
    'name' : name,
    'age' : age,
    };
   }

---

🍽 MVVM 패턴의 이해와 흐름

MVVM은 앱의 코드를 나누어 앱의 흐름과 설계를 쉽게 만들어주는 설계 도면 같은 존재

✔️ 구성요소

• Model: 데이터 그 자체
• View: 사용자에게 보이는 화면
• ViewModel: 뷰와 모델 사이의 중개자, 뷰에 필요한 데이터를 가공해고 로직 처리

✔️ 흐름

1. View 이벤트 발생 (사용자가 버튼 클릭)
2. ViewModel 함수 호출
3. ViewModel이 데이터를 처리 (Model 업데이트)
4. ViewModeldl t상태가 변했음 알려줌
5. View가 자동으로 화면갱신

---

🍚 🍽 Riverpod

상태관리 도구

✔️ 기본 사용법

1. Provider 정의해주기 (데이터 제공 상자)
2. Consumer Widget 사용 (감시용)

// 1. 전역 변수로 프로바이더 선언
final nameProvider = StateProvider<String>((ref) => "개발자에게");

// 2. ConsumerWidget을 상속받아서 사용
class HomeView extends ConsumerWidget {
 @override
 Widget build (BuildContext context, WidgetRef ref) {
 
 // 3. ref.watch를 통해 데이터 감시 및 UI 변경
 final name = ref.watch(nameProvider);
 
 return Scaffold (
 body: Center(child: Text(name)),
 floatingActionButton: FloatingActionButton(
  onPressed: () => ref.read(nameProvider.notifier).state = "Flutter 개발자",
  ),
 ),
}
}

• ref.watch : 값이 바뀌면 화면을 다시 그려줘 (build 함수 안에서 사용)
• ref.read : 값을 한번만 읽어줘 (주로 버튼 클릭 같은 이벤트 함수에서 사용)

---

이렇게 또 한주가 지나갔다
매주 그렇게 느끼 듯.. 이번주는 정말 많은 것들이 머리에 들어왔다.
특히 MVVM 얘는 정말 해줄 일이 많아서 파일 정리도 잘 해야하고 복잡한 것 같지만,, 정말 코드를 많이 써보는 연습을 해봐야겠다 화이팅

지금 이상태 이 컨디션으로 과제를 하러 gogo...🍭