[Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (1)

Flutter을 사용하여 앱을 개발하거나 인터넷에서 데이터를 가져올 때, 중요한 단계 중 하나는 서버에서 데이터를 가져오는 과정입니다.

하지만 앱에서 서버로 직접 통신하는 것은 대부분 불가능합니다.

따라서 우리는 서버에서 웹에서 데이터를 앱에서 사용 가능한 형식으로 변환하고 전달해야 합니다.

이를 위해 JSON 파싱, XML 파싱 또는 웹 태그 파싱과 같은 다양한 방법을 사용할 수 있습니다.

이번 포스팅에서는 JSON 형식의 API 데이터를 Flutter 및 Dart로 파싱하는 방법에 대해 알아보겠습니다.

 

예를 들어, 아래 이미지와 같이 JSON 형식으로 인코딩된 API 데이터가 있다고 가정해 봅시다.

(아래 이미지는 필자의 처음으로 개발한 JVAK-API로, JVAK의 모든 데이터를 관리하는데 사용됩니다.)

이 API에서는 "jvak"라는 키 안에 List<Map<String, dynamic>> 타입의 데이터가 보관되어 있습니다.

API의 Map 데이터들을 살펴보면 아래와 같습니다.

{"sid":"ky20230501007Z","scode":"ky","title":"조용한 밤에","singer":"타나카 리에","ani_title":"기동전사 건담 SEED","ani_stage":"4기 ED","ani_category":"","song_number":"40599"},

API 데이터에 대해 잠시 설명을 하자면 아래와 같습니다.

• sid라는 키에는 해당 데이터의 고유 키값이 저장되어 데이터를 불러오거나 유지관리할 때 사용합니다.
• scode에는 노래방의 사명이 지정되어 있어 금영(ky)인지 태진(tj)인지 구분하는 용도로 사용합니다.
• title, singer, ani_title, ani_stage, ani_category, song_number 키의 경우 노래의 정보가 담겨 있는 데이터입니다.

이렇게 API를 분석하면 각 key 값과 value 값을 확인하여 어떤 데이터를 관리하는지 유추할 수 있으며, 각 데이터의 용도를 파악할 수 있습니다.

 

위 API 데이터의 구조 파악을 마쳤으니 Data Model을 제작합니다. Data Model을 제작하기 위해 필요한 정보는 API의 key 값과 API의 실제 데이터들의 타입(ex: Map<String, dynamic>)이 필요합니다.

아래는 위 API에서 사용하는 데이터를 Data Model로 제작한 코드입니다.

class JvakModel {
  /// 노래 JSON 집합
String sid = '',        // 노래 정보: 고유 식별자
      scode = '',       // 노래 정보: 곡 코드
      title = '',       // 노래 정보: 제목
      singer = '',      // 노래 정보: 가수
      aniTitle = '',    // 노래 정보: 애니메이션 제목
      aniCategory = '', // 노래 정보: 애니메이션 카테고리
      aniStage = '',    // 노래 정보: 애니메이션 스테이지
      number = '';      // 노래 정보: 곡 번호

  /// 노래 JSON 데이터 Named Constructor
  JvakModel.fromJson(Map<String, dynamic> json)
      : sid = json['sid'],
        scode = json['scode'],
        title = json['title'],
        singer = json['singer'],
        aniTitle = json['ani_title'],
        aniCategory = json['ani_category'],
        aniStage = json['ani_stage'],
        number = json['song_number'];
}

 

위 JvakModel 코드에 대해 간략하게 설명해보면 다음과 같습니다.

• API의 value타입이 모두 String 타입인걸 알 수 있으며 이에 따라 모든 변수를 String타입으로 선언해줬습니다.
• 위의 코드는 JvakModel 클래스의 생성자를 정의합니다. 이 생성자는 JSON 형식의 데이터를 입력으로 받아서, 이 데이터를 JvakModel 클래스의 멤버 변수에 대응하는 값으로 조립합니다.
• 생성자는 명명된 생성자(Named Constructor)로, fromJson이라는 이름을 가지고 있습니다. 이 생성자를 사용하면 JSON 데이터를 JvakModel 객체로 변환할 수 있습니다.
• 생성자 내부에서는 입력으로 받은 json 맵에서 각 키에 해당하는 값을 가져와서 클래스의 멤버 변수에 할당합니다. 이를 통해 JSON 데이터의 특정 필드를 클래스 변수로 매핑하여 저장합니다.

이러한 생성자를 사용하면 JSON 데이터를 쉽게 Dart 객체로 변환할 수 있어서, 앱에서 데이터를 다룰 때 편리합니다.

데이터 모델 클래스와 이와 관련된 생성자는 데이터 파싱 및 처리를 단순화하고 가독성을 높이는 데 도움을 줍니다.

 

이번 포스팅에서는 Data Model을 제작하는 방법에 대해 자세히 살펴보았습니다.

다음 포스팅에서는 이렇게 제작한 Data Model을 어떻게 화면에 표시하고 활용할지에 대해 다룰 예정입니다. 

 

참고: 명명된 생성자 이해하기

[Flutter] Dart의 명명된 생성자(Named Constructor) 이해하기

 

DataModel을 사용하여 api 데이터 화면에 보여주기 2편 -

[Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (2)

DataModel을 사용하여 api 데이터 화면에 보여주기 3편 -

[Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (3)