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

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

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

 

아직 이전 포스팅을 보지 못했다면 아래 링크를 이용해 확인할 수 있습니다.

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

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

이전 포스팅에서 제작한 dataModel은 json데이터를 가져오기 위한 준비단계에 불과합니다.

dataModel을 사용해 데이터를 불러오기 위해서는 apiService라는 파일을 하나 더 만들어 http/http.dart 라이브러리를 이용하여 데이터를 불러올 수 있게 작업을 해줘야 합니다.

 

우선 http라이브러를 가져오기 위해 프로젝트 경로 안에서 아래 명령어를 사용합니다.

flutter pub add http

설치 완료시 아래와 같이 Got dependencies! 라고 나옵니다.

"http" is already in "dependencies". Will try to update the constraint.
Resolving dependencies... 
  collection 1.17.2 (1.18.0 available)
  cupertino_icons 1.0.5 (1.0.6 available)
  flutter_lints 2.0.2 (2.0.3 available)
  google_fonts 5.1.0 (6.1.0 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.9.1 (1.10.0 available)
  petitparser 5.4.0 (6.0.1 available)
  stack_trace 1.11.0 (1.11.1 available)
  stream_channel 2.1.1 (2.1.2 available)
  test_api 0.6.0 (0.6.1 available)
  web 0.1.4-beta (0.2.2-beta available)
  webview_flutter 4.2.4 (4.3.0 available)
  webview_flutter_android 3.10.1 (3.12.0 available)
  webview_flutter_wkwebview 3.8.0 (3.9.0 available)
  win32 5.0.7 (5.0.9 available)
  xml 6.3.0 (6.4.2 available)
Got dependencies!

http라이브러리 설치가 끝났으면 service_api.dart라는 파일을 생성하여 아래 코드를 작성해줍니다.

class DataApiService{
    Future<DataModel> getData() async {
      List<DataModel> dataInstence = [];
        final coreUrl =
            Uri.parse('당신의 API URL');
        final response = await http.get(coreUrl);

        if (response.statusCode == 200) {
          final Map<String, dynamic> data = jsonDecode(response.body);
		  final List<dynamic> dataSet = data['호출 키 필드(ex: jvak)'];
          // "jvak" 필드가 있는 경우에는 아래 코드를 사용합니다.
		  for (var data in dataSet) {
        	movieInstence.add(DataModule.fromJson(data));
      	  }
          
          // "jvak" 필드가 없는 경우에는 데이터를 직접 파싱합니다.
          final DataModel dataModel =
              DataModel.fromJson(data);

          return dataInstence;
        } else {
          print('''
    error[jvapApiService - response error] \nresponseCode = ${response.statusCode}
          ''');
        }
        throw Error();
      }
  }

위 코드에 대해 간단하게 설명하고 넘어가겠습니다.

1. [ class DataApiService { ... } ]: DataApiService 클래스를 정의합니다. 이 클래스는 API로부터 데이터를 가져오고 처리하는 역할을 수행합니다.
2. [ Future<DataModel> getData() async { ... } ]: getData 메서드는 DataModel 객체를 반환하는 비동기 함수입니다. 이 함수는 API에서 데이터를 가져오는 역할을 합니다. Future<DataModel>은 비동기 작업의 결과로 DataModel 객체를 반환할 것임을 나타냅니다.
3. [ List<DataModel> dataInstence = []; ]: dataInstence는 DataModel 객체를 저장할 리스트입니다. 이 리스트에 API에서 가져온 데이터를 추가할 예정입니다.
4. [ final coreUrl = Uri.parse('당신의 API URL'); ]: API의 엔드포인트 URL을 coreUrl 변수에 저장합니다. 이 URL은 API에서 데이터를 가져오는 데 사용됩니다. 여기서 '당신의 API URL'을 실제 API의 URL로 대체해야 합니다.
5. [ final response = await http.get(coreUrl); ]: http 패키지를 사용하여 API에 GET 요청을 보내고, 응답을 response 변수에 저장합니다. await 키워드를 사용하여 비동기적으로 응답을 기다립니다.
6. [ if (response.statusCode == 200) { ... } ]: HTTP 응답의 상태 코드가 200인 경우에만 실행하는 조건문입니다. 상태 코드 200은 성공적인 요청을 의미합니다.
7. [ final Map<String, dynamic> data = jsonDecode(response.body); ]: 응답 본문(response.body)을 JSON 형식으로 디코딩하여 data 변수에 저장합니다. 이렇게 파싱된 데이터는 DataModel.fromJson(data) 메서드를 통해 DataModel 객체로 변환됩니다.
8. [ final DataModel dataModel = DataModel.fromJson(data); ]: JSON 데이터를 DataModel 객체로 변환합니다. DataModel.fromJson(data) 메서드를 사용하여 JSON 데이터를 DataModel 객체로 매핑합니다.
9. [ return dataInstence; ]: dataInstence 리스트에 데이터를 추가한 후, 이 리스트를 반환합니다. 하지만 실제로는 dataModel을 반환해야 합니다.
10. [ } else { ... } ]: HTTP 응답 상태 코드가 200이 아닌 경우에 실행되는 부분입니다. 오류 메시지를 출력하고 예외를 throw합니다.
11. [ throw Error(); ]: 오류가 발생한 경우 Error 예외를 throw합니다.

---

API에서 데이터를 불러오는 작업을 성공적으로 완료하셨습니다. 이제 데이터를 활용하여 앱의 사용자 인터페이스(UI)를 구성하고, 사용자에게 친숙한 방식으로 데이터를 표시하는 작업을 시작할 수 있습니다. 다음 포스팅에서는 데이터를 화면에 출력하고 사용자와 상호작용하는 방법에 대해 알아보겠습니다.

 

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

 

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

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

 

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