flutter + django rest framework(3) Read

안녕하세요~ 저번 포스팅에 이어서 flutter django로 간단한 todolist 만들기! 계속해봅시다~

create를 만들었다면 Read는 정말 쉽게 끝내실 수 있습니다. 이제는 기본 설정이 필요 없으니 views와 url 만 설정해 준다면 django는 더 만져줄 필요가 없고! flutter 또한 몇몇 코드만 추가해주면 됩니다. 같이 가봅시다.

 

django 쪽을 먼저 봅시다. 먼저 view를 추가해 줍시다.

이제 코드가 좀 보이시죠? 새로운 코드가 좀 생겼으니 설명을 해봅시다. 

TaskSetQuery는 Query문을 만들어 주는 것입니다. 쿼리문이란 데이터베이스에서 데이터를 관리하기 위해 쓰는 문장으로 django에서는 django만의 문법을 사용할 시 쿼리문을 만들어 줍니다. 여러 가지 함수를 이용해 데이터를 관리할 쿼리문을 만들 수 있지만 현재로서는 Task 데이터 테이블에서 all() 함수를 이용해 모든 데이터를 가져와라! 정도만 사용하겠습니다. serializer에 쿼리문을 넣어주면 해당 쿼리문에 맞게 데이터베이스에서 데이터를 가져와 데이터를 직렬화해줍니다. serializer 정말 편하죠? 해당 데이터를 Response를 통해서 flutter 쪽으로 보내주는 겁니다.

 

view를 생성했으니 url을 생성해 줍시다.

위와 같이 url path를 생성해 줬으니 이번에는 posting만 넣어도 리스트를 가져오겠지요?

 

좋습니다. django 쪽은 이걸로 작업이 완료되었습니다.

 

flutter를 봅시다.

create 포스팅의 Task class에서 하나의 함수를 추가해 주면 됩니다. 바로 Json 형태의 데이터를 우리가 만들어 놓은 Task class로 바꿔주는 겁니다. fromJson 함수를 이용해서!

 

factory 키워드는 생성자와는 조금 다르지만 맥락이 비슷합니다. 단, 하나의 인스턴스만을 사용하는 것이지요. 쉽게 말해 자원을 아끼기 위해서 사용하는 키워드입니다.

Map <String, dynamic> 형태의 json 데이터를 매개변수로 넣어 Task객체를 하나 생성하여 return 해주는 함수입니다.

 

다음으로 main.dart 부분을 만져 줍시다. getTaskFromServer 함수를 만들어 줍시다. 얼핏 봤을 때 엄청 많은 chaining! 정말 어려워 보이지만 같이 한번 봅시다. 말 그대로 서버로부터 Task들을 가져오는 함수입니다. Create 때 봤듯이 get형식으로 10.0.2.2:8000/posting 주소로 서버에 요청을 보내는 것입니다.

이때 받아온 response를 utf8 형태로 decode 해주고 대망의 chaining 된 list를 한번 풀어 봅시다.

json.decode(responsebody) 이는 encode의 반대의 행동을 해주겠지요? json파일을 풀어서 배열로 나타내줍니다.

이러한 배열에 .map<Task>((json) => Task.fromJson(json)) 말은 어렵지만 각 배열 요소에 Task class에 생성해 둔 fromJson 함수를 적용시켜 또 다른 배열로 만들어 줍니다.

하지만 이때 자료형이 iterable이라는 자료형을 반환합니다. 우리는 List 형식의 객체가 필요하니 toList() 함수를 이용하면 값들을 List로 포장해 줍니다.

 

마지막으로 setState에 변수로 선언되어 있는 tasks에 list를 추가시켜주면 끝입니다!

앱이 실행될 때 Task를 가져와 List를 보여주는 게 좋을 테니 flutter 생명주기 중 하나인 initState 코드를 override 해줍시다.

처음 앱이 실행될 때 getTaskFromServer 함수가 실행되어 tasks 리스트를 채워주도록 합시다.

 

 

바로 결과를 확인하고 싶지만 하나만 더 하고 갑시다.

add 했을 때 바로바로 서버로 부터 값을 가져오면 얼마나 멋있을 까요?

addTaskToServer 함수의 마지막에 getTaskFromServer() 함수를 추가해 줍시다

좋습니다! 실행해 봅시다!

!!!!! 실행하자마자 해야 할 일들이 나를 반겨주는 모습 정말 이쁘네요!

할 일을 추가했을 때도 리스트가 초기화되는지 확인해 봅시다.

좋습니다. 추가를 해주었을 때 별도의 제스처를 해주지 않아도 추가된 Task가 리스트로 나오네요.

 

Read 포스팅은 여기까지 하도록 하겠습니다. 다음 update 포스팅에서 보도록 해요! 얼마 남지 않았으니 끝까지 같이 해봐요.