-
[Flutter 기초] Future 개념과 사용방법 async/await,then개발/flutter 2021. 9. 5. 16:59
Modern Collection View 와 MVVM 패턴 가이드
Future 은 미래의 값을 의미합니다. 미래의 값은 무슨 말일까요?
비동기로 처리되어야 할 값을 의미합니다.
더 어려운 말이죠? 쉽게 예시를 들어봅니다.
카페에서 아메리카노를 주문합니다. 돈을내고 1분정도 기다리면 아메리카노를 받겠죠?
그러면 지금 기준으로 아메리카노는 Future 입니다. 1분 미래에 받을수 있기 때문입니다.
우리는 서버로부터 데이터를 받아올때 서버로 부터 응답값을 받을때까지 우리는 기다려야 합니다.
혹은 사용자가 어떤 버튼을 누를지 기다릴때도 있겠죠. 이럴때 Future를 사용합니다.
Future는 Future<타입명> 이런식으로 타입을 명시해야 합니다. 미래에 받을 값의 타입을 말합니다.
위의 경우 Future<Americano> 이렇게 되겠죠?
이렇게 Future에 대한간단한 설명을 마무리짓고 이 Future를 다루는 방법을 설명 하겠습니다.
비동기 값을 처리하는 방식은 콜백,async/await, then 방식이 있습니다.
여기서는 async/await과 then을 사용 해보겠습니다.
처음에 flutter create 하면 생성되는 보일러 플레이트 코드 위에서 실습합니다.
버튼의 기능만 바꿔 보도록 합니다.
버튼의 onPressed 함수를 하나 만들어서 넣어줬습니다.
아직 함수 내부는 없지만 함수의 리턴 타입은 Future<void> 이며
async 라는것이 함수에 붙어있습니다. await 을 사용하기 위해 붙어있다고 보시면 됩니다.
우선 지금 서버로 데이터를 받아 오는것보다 쉬운 방식으로 테스트합니다.
Future.delayed() 함수를 사용하면 원하는 시간만큼 딜레이를 시킨후 함수를 실행시킵니다.
여기서 1초를 딜레이 후에 "Future" 라는 String 을 리턴해봅니다.
그럼 이 리턴값을 받으려면 어떻게 할까요? 앞에 변수를 만들어 받아주면 되지 않을까요?
이렇게 되면 앞에 리턴값을 받은 변수는 리턴 값이 아닌
Future<리턴타입> 이 됩니다. 우리가 기대했던 값은 "Future" 인데 말이죠
이때 await을 사용하면 됩니다.
올바르게 String 타입이 되었습니다.
await 은 비동기 방식입니다. 비동기란 작업이 완료가 될때까지 가만히 있는다는겁니다.
그래서 리턴값이 retunValue에 들어가고 나서야 그 다음 코드가 실행됩니다.
만약 그 다음 코드에서 returnValue를 사용할경우
이렇게 비동기 방식으로 처리해야 올바르게 사용할수 있겠죠
만약 비동기가 아니었다면 returnValue값이 들어오기 전에 returnValue를 사용하게되어
문제가 발생될수 있습니다.
다음은 then입니다.
Future 에는 여러 메소드를 사용할수있느데 여기서 then과 onerror를 보겠습니다.
then 함수에는 value라는 파라미터가 들어있습니다.
이것은 바로 Future의 리턴 값을 의미합니다. "Future" 겠죠
그러면 이 value를 바로 사용하면 됩니다. 아까 처럼 returnValue라는 변수에 담아 사용하지 않아도 되겠죠?
조금더 깔끔 하다고도 볼수있으나 개인 취향인것 같습니다.
단지 저는 catchError를 위해 then을 사용합니다.
아메리카노를 시키고 기다리는데 직원이 와서 재료가 떨어졌다고 합니다
그러면 우리가 받은 값이 Future<Americano> 일까요?
아닙니다 Future<Error> 입니다.
비동기 함수에서 에러가 발생하면 error를 던집니다.
이걸 캐치볼 마냥 받을때 catchError를 사용합니다.
'개발 > flutter' 카테고리의 다른 글
Flutter camera ios 권한 요청, 처리 하기 (0) 2021.08.25 [Flutter기초] Navigator push/pop 과 페이지간 값 리턴하기 (0) 2021.08.08 [Flutter basic] stateless widget 과 stateful 위젯 사용법 (0) 2021.07.24 [Flutter basic] Listview 상품 리스트 구현하기 예제(column,row,container) (5) 2021.07.11 [Flutter basic] Listview 를 사용해 원하는 UI 구현하기 (0) 2021.07.03