개발/플러터(Flutter)

[플러터(Flutter)] - Http에서 json 타입의 데이터 가져오기(GET)

수인분당선 2023. 11. 29. 12:30
반응형

이전 글에서는 formdata, json타입으로 POST를 하는 방법에 대해서 배웠습니다.

이번에는 Http에서 GET을 통해 데이터를 가져오고, 데이터를 활용할 수 있도록 데이터를 가공하는 과정을 알아보겠습니다!

 

GET와 POST의 차이점

GET와 POST 중 어떤 것을 사용하더라도 서버가 데이터를 제공한다는 데에서는 큰 차이가 없습니다.

둘의 차이는 GET는 기존에 있는 데이터들에서 일종의 key값으로 저장되어 있는 데이터를 꺼내오는 것이고, POST는 새로운 값을 서버로 저장할 수 있도록 한 후, 서버에서는 보낸 값을 기반으로 확인된 값이나 변경된 사안을 다시 되돌려준다는 점에서 차이가 있습니다.

 

GET

Future<List<postcard>> getplease(String userEmail, int number) async {

함수의 시작을 알립니다. 먼저, get요청을 하는 데 있어서 필요한 정보를 파라미터값으로 받아옵니다. 

그리고 서버로부터 받은 데이터를 반환할 타입을 지정합니다. 

여러 개의 데이터를 사용자지정 타입으로(postcard) 리스트의 형태로 받아올 것이며, 서버로부터 데이터가 도착한 후에 반환 (Future)되어야 하므로, 위와 같이 작성해줍니다.

사용자지정 타입 및 클래스는 각자 작성하시면 되겠습니다!

var response = await http.get(
	Uri.parse(
		'${posturl}userEmail=${userEmail}&postCnt=${number}'
    ),
);

데이터를 GET로 요청해줍니다. 데이터를 받아올 때까지 기다려야 하므로 비동기 await를 사용하고, 요청되는 주소에 위와 같이 값을 넣어줍니다.

보통 get요청은 ip주소?요청데이터명=데이터&... 와 같이 파라미터를 주소값에 입력하는 형태로 이루어져 있으므로 위와 같이 작성합니다

List<dynamic> body = jsonDecode(utf8.decode(response.bodyBytes));

json형태로 받은 데이터를 우리가 사용할 수 있도록 만들기 위해 디코딩을 진행합니다.

저는 이 요청을 통해 받아지는 데이터가 여러개인 관계로 list타입으로 데이터를 받아오도록 작성하였습니다.

List<postcard> card = body.map((dynamic e) => postcard.fromJson(e)).toList();

디코딩이 완료된 상태의 데이터를 가공된 타입으로 집어넣어서 우리가 사용하기 편하도록 만들어줍니다.

여기서 map를 활용하여 리스트 형태로 받은 fromJson형태의 데이터를 postcard에 각각 넣고 tolist()를 통해 리스트화합니다.

return card;

데이터를 반환해줍니다.

전체적으로 보면 아래와 같은 모습의 함수가 완성됩니다

Future<List<postcard>> getplease(String userEmail, int number) async {
  var response = await http.get(
    Uri.parse('${posturl}?userEmail=${userEmail}&postCnt=${number}'),);

  List<dynamic> body = jsonDecode(utf8.decode(response.bodyBytes));
  List<postcard> card = body.map((dynamic e) => postcard.fromJson(e)).toList();
  return card;
}

데이터 모델링하기

위에서 사용된 postcard의 구조를 보며 데이터가 어떻게 저장되었는지 이해해보겠습니다.

class postcard {
  final int postId;
  final String contents;
  final String postTime;

  postcard({
    required this.postId,
    required this.contents,
    required this.postTime,
  });
  factory postcard.fromJson(Map<String, dynamic> json) {
    return postcard(
        postId: json["postId"],
        contents: json["contents"],
        postTime: json["postTime"],
  }
}

새롭게 만들 클래스를 지정하고, 가져올 데이터들의 이름과 타입을 지정합니다.

여기서 factory라는 타입이 지정되는데, 이 타입은 객체지향의 디자인 패턴 중 하나로, 자세한 내용은 후에 다루도록 하겠습니다. 지금은 간단하게 클래스와 같은 역할을 한다고 생각하면 됩니다.

키는 string, 값은 모든 타입을 아울러 받을 수 있는 dynamic타입을 지닌 map형태의 json을 받아옵니다.

그리고 여기서 받아온 값을 통해 postId에는 json에서 키가 postId인 값을 찾아 저장하고 , 다른 값도 이처럼 반환될 수 있도록 작성합니다.

그렇게 json으로 받아온 데이터를 내가 직접 만든 하나의 postcard타입의 데이터로 변환시킵니다.

이렇게 변환을 해 두어야 후에 직접 데이터를 활용하기가 편합니다.

 

오늘은 flutter에서 json타입의 데이터를 받아오고 모델링을 통해 직접 활용 가능하도록 데이터를 가공하는 방법을 알아보았습니다.

과정을 요약하자면

1. 받아올 데이터들을 살펴보고, 데이터에 맞게 팩토리 메소드를 활용하여 클래스 작성하기

2. POST 요청 보내기

3. 반환받은 json타입의 데이터 decode하기

4. json형태로부터 map 함수를 활용하여 사용자지정클래스에 맞게 가공하여 저장하기

5. return!

이러한 순서로 POST의 요청 처리가 진행된다고 생각하시면 됩니다!

 

틀린 부분이나 추가적으로 필요한 부분이 있다면 말씀 부탁드립니다! 감사합니당

반응형

 

반응형