모델 클래스로 분리

🛠️ 기본의 이미지 검색 앱을 refactoring.

1. 처리할 데이터를 따로 파일을 만든다. 실제 데이터에 앞뒤로 큰 따옴표 3개를 찍으면 스트링으로 읽는다. 따로 파일을 만들었다면 반드시 import를 해줘야 한다. (import 'mock_data/images.dart'; import 'picture.dart';)

내 경우는 파일을 따로 빼주고 import해주지 않아서 images와 Picture.fromJson(e)부분에 빨간불이 들어와 뭐가 문제인지 찾느라 헤맸다.

String images = """{}""";

2. 기존의 <Map<String, dynamic>>부분을 picture.dart 파일로 새로 만들어 뺀다. 아래가 새로 만든 파일에 들어갈 내용이다.

class Picture {
  final String previewURL;
  final String tags;

  Picture({
    required this.previewURL,
    required this.tags,
  });

  factory Picture.fromJson(Map<String, dynamic> json) {
    return Picture(
      previewURL: json['previewURL'] as String,
      tags: json['tags'] as String,
    );
  }
}

3. 이후 기본 파일에 <Map<String, dynamic>>부분을 Picture로 바꿔준다.

    String jsonString = images;

    Map<String, dynamic> json = jsonDecode(jsonString);
    Iterable hits = json['hits'];
    return hits.map((e) => Picture.fromJson(e)).toList();

4. 위 코드는 jsonString에 데이터를 따로 뺀 images 파일내용이 들어가고, 이 데이터를 jsonDecode한다는 의미다. 그리고 디코드된 jsonString 중 hits 부분에 있는 내용(json['hits'])이 변수 hits에 들어간다. 이후 hits의 내용을 Picture파일의 형식으로 리스트한다는 의미다.

5. 기억해야 할 것은 우리가 모델 클래스로 빼고, 데이터를 따로 파일로 만들 때 이걸 그대로 가져다 쓰며 그 파일 이름들만 바꿔주면 된다는 점이다.

String jsonString = 데이터가 들어있는 파일명;

    Map<String, dynamic> json = jsonDecode(jsonString);
    Iterable 새로 만들 변수명 = json['데이터에서 가져올 부분의 이름'];
    return 새로 만들 변수명.map((e) => 따로 뺀 모델 클래스명.fromJson(e)).toList();