[022] 플러터 (Flutter) 배우기 - FutureBuilder, Future, Async, Await, 로딩표시, JSON 파일 불러오기

안녕하세요, totally 개발자입니다.

 

오늘 다룰 부분은 좀 방대하지만 Flutter에서 반드시 알아야 할 부분으로 FutureBuilder, Future, Async, Await, 로딩 중일 때 로딩중임을 표시하는 방법, JSON 파일을 불러오는 플러터에서 불러와서 출력하는 방법들입니다. 이 개념은 비동기(Asynchronous) 처리로써, 보통 한 작업을 처리하고 나서 다음 작업을 처리하는 반면, 비동기에서는 한 작업을 일단 처리를 시작하고 처리가 끝나지 않았음에도 불구하고 다음 코드 작업 실행에 착수합니다. 그 때 플러터에서 사용하는 개념이 Future, Async, Await입니다. async 키워드는 함수 부분에 붙여주고 await는 실행해야 하는 함수 앞에 붙여주면 됩니다. 바로 예제를 확인해보도록 하겠습니다. 

 

json 파일 생성

먼저 json 파일을 준비해줍니다. 저는 studentList.json 파일에 "students"를 키로, 값으로는 배열 형태로 넣었습니다. 

 

Future, async, await 사용 모습

위 코드를 보시면 18번째 Future studentList를 선언해서 loadJson() 함수의 리턴값으로 변수에 넣어주도록 작업했습니다. Future에 <>를 이용해서 <String> 등으로 표시해줘도 되고 생략해도 괜찮습니다. 다만 붙여주는 것을 권장합니다. 11번째 줄에 static Future loadJson() async 형태로 사용했는데 static를 붙여주는 것은 아래 loadJson() 함수를 생성자 없이 사용하기 위한 목적이고, 실무에서는 이렇게 사용하기보다는 파일을 분리해서 사용할 것입니다. Future, async, await, json 키워드를 사용하기 위해 1,2,3번째 줄에 import 구문들을 추가해주었습니다. rootBundle.loadString을 통해 json 파일을 가져오고, 14번째 줄에 decode 함수를 통해 data에 값을 넣어주고 반환해주면 됩니다. 이 decode 과정에서 처리되는 시간이 다소 소요될 수 있기 때문에 await 키워드를 추가해줍니다. 

 

FutureBuilder 위젯

이번에는 FutureBuilder 위젯입니다. 이 FutureBuilder 위젯은 말 그대로 Future 타입을 사용하는 경우에 사용되는 위젯이며 에러 처리, 대기하는 즉 로딩되는 동안 로딩중 표시 등 여러가지 상황에 대처할 수 있습니다. FutureBuilder 속성으로, future 속성에 studentList를 넣어줍니다. snapshot은 진행된 상황 즉 현재 연결 상태, 받아온 데이터 등을 표시할 때 사용한다고 이해하시면 되며 여기에 접근하여 데이터를 가지고 올 수 있습니다. 29번째 줄에 data가 있는 경우 저번에 다루었던 ListView.builder를 사용해서 데이터를 연속적으로 불러올 수 있습니다. 40번째처럼 데이터를 불러오지 못하는 경우 즉 에러가 있는 경우에는 에러 메시지를 출력할 수 있도록 작업했고 49번째 라인, 그 이외 상황 및 로딩 중일 때에는 로딩 중 표시를 할 수 있도록 코드를 구성했습니다. 

 

올바르게 데이터를 가져온 경우	에러가 있는 경우	로딩 되는 경우

이렇게 다양한 상황에 맞게 코드를 구성할 수 있습니다. 아래 코드를 참고하셔서 적절하게 사용하시면 됩니다. 감사합니다.

 

[전체 소스 코드]

 

 

 

[유튜브 영상 강좌]

 

https://youtu.be/c7hih7mQJw4