2026.01.05 (월)
- JSON
- Riverpod
- MVVM
☑️ JSON (JavaScript Object Notation)
✈️ 구조
키(Key)와 값(Value)의 쌍으로 이루어져 있다.
➙ 사용법: JS Object 중괄호 안에 key-value
Key : 반드시 문자열!
Value : String, Number, Boolean, Array(대괄호), Object(중괄호), null
➙ Dart에서의 처리
jsonDecode() : 서버에서 온 String을 Map(객체)로 변환
jsonEncode() : Dart 객체를 다시 String(글자)로 만들기
중요성
모든 데이터는 JSON 형태로 오기에 Dart 객체로 바꾸는 '역직렬화' 과정이 있어야 함
-
jsonEncode : Map => String 으로 바꿔주는 역할!
-
jsonDecode : String => Map 으로 바꿔주는 역할
-
데이터를 객체로 만들기 위해서 클래스 정의
3-1) 네임드 파라미터 받는 생성자 만들기
3-2) Map 타입의 데이터를 받으면 바로 객체로 만들 수 있는 네임드 생성자 만들기
3-3) Human 클래스가 객체가 되면, 다시 Map 형태로 바꿔주는 함수를 만들어야 함
☑️ Riverpod (상태 관리 패키지)
✈️ 개념
➙ 핵심 개념
Provider : 데이터를 담고 있는 '보관함' 앱 어디서든 이 보관함에 접근 가능
ConsumerWidget : 데이터를 지켜보고 있다가, 데이터를 바뀌면 화면을 자동으로 다시 그려주는 위젯?
Ref : 위젯과 Provider를 연결해주는 통로 (ref.watch ref.read)
➙ 사용 이유
- UI 코드와 데이터 처리를 완벽히 분리할 수 있음
- 데이터가 없는 상태에서 접근하는 실수를 컴파일 단계에서 잡아준다
- 앱이 커져도 데이터가 어디서 바뀌는지 추적하기 쉽다!
☑️ MVVM
Model View ViewModel 세 가지 영역으로 나뉨
코드가 섞이지 않게 분리하여 관리하기 편함
➙ Model (데이터 형태)
- 역할: 앱에서 다루는 데이터와 데이터를 처리하는 로직
- 연결: JSON 데이터를 dart 클래스로 변환
➙ View (눈에 보이는 화면)
-
역할: 사용자에게 보여지는 UI 화면
-
원칙: 계산, 데이터 불러오기 등은 절대 포함하지 않고, 오직 화면을 그리는 일만 함
StatelessWidget, ConsumerWidget
➙ ViewModel (중간 관리자)
-
역할: View와 Model 사이를 연결함. View가 필요로 하는 데이터를 가공해서 전달하고, 화면의 상태를 관리해줌
-
연결: Flutter에서는 Riverpod(Provider)이 이 ViewModel의 역할을 수행한다
-
특징: View는 ViewModel을 바라보고 있다가, 데이터가 바뀌면 화면을 바꿔줌
| - | 하는 일 |
|---|---|
| View | 감시 |
| ViewModel | 로직 처리 |
| Model | Data |
