Flutter _ waitForWebToons

230531

 

---

 

오늘은 지난 시간에 이어

잘 가져온 Json 데이터를

 

이제 앱 화면에 띄워보겠다.

 

---

1. Show our API data in App

 

우선 우리가 선언한

ToonflixApiService 클래스의변수와 함수를 static으로 바꿔준다.

 

---

 

💡Static ⭐⭐⭐

 

Dart에서 static이 의미하는것은

자신을 감싸고 있는 클래스에 귀속 시키는 것이다.

 

클래스는 멤버변수와 멤버함수를

객체를 생성해야 사용 가능하지만

 

static이 붙은 경우

class에 귀속됨으로

따로 선언할 필요가 없다.

 

이렇게 클래스에 귀속되는 이유는

static이 붙은 멤버변수나 멤버함수는

 

메모리가 할당되어

프로그램 종료까지 사용 가능하기 때문이다.

 

---

위와 같이 static으로 변경 후

메인 함수가 있는 코드로 와서

 

해당 부분을 지워준다.

 

이제 우리 앱의 화면을 담당하고있는

Toonflix_home_screen 파일로 이동하자.

 

---

 

2. Future 타입의 데이터를 가져오는 첫 번째 방법

 

 

우리는 이제 state를 사용할거기 때문에

ToonflixHomeScreen을

StatefulWidget으로 바꿔준다.

 

데이터 타입은

WebtoonModel의 리스트로 하여

 

state가 가질 데이터를 담을

리스트를 선언해준다.

 

그리고 로딩 상태를

하나 선언해준다.

 

api의 데이터를 받아야 함으로

위와 같이 initState 함수를 선언하고

 

실제 웹툰 데이터를 받을

waitForWebToons() 선언한다.

 

ToonflixApiService의 getTodaysToons()가 비동기 함수 이므로

 

waitForWebToons() 또한

비동기 함수로 선언한다.

 

그리고 위에서 선언한

webtoons로 정의한다.

 

그리고 isLoading은 기본값으로 false로 놓고

 

함수를 호출했을때

UI의 초기화를 위해

setState()를 넣어준다.

 

자 이제 

waitForWebToons()가 잘 작동하는지 확인해보기 위해

 

build아래 webtoons와 isLoading을 출력해보자.

 

위와 같이

처음에는 webtoons는 비어있지만

 

isLoading이 true가 되고

 

webtoons가 WebtoonModel의

인스턴스로 채워지는것을 확인할 수 있다

 

그리고 isLoading은 false로 바뀐다.

이 말은 즉 비동기함수가 역할을 잘 하고 있다는 뜻이다.

 

 

 

---

3. Future 타입의 데이터를 가져오는 두 번째 방법

 

첫 번째 방법의 경우

굉장히 복잡하다.

 

webtoons와 isLoading을 만들어야 하고

비동기 함수도 신경써야하고

굉장히 복잡하면서 반복도 많아질 수 있다.

 

이번에는 StatefulWidget이 아니라

StatelessWidget으로 데이터를 가져와보자.

 

그리고 바로

ToonflixApiService의getTodaysToons을 선언해 가져온다.

 

이때 우리는 Future로 값을 나중에 받을테니const를 없애줘야한다.

 

그리고 main()에 있는 MaterialApp() 앞에

const도 제거해준다.

 

---

3-1. FutureBuilder

 

우리는 Api 데이터를 가져와야하므로

비동기 함수를 사용하고 있다.

 

만약 위와 같이

선언을 하고 실행을 하면

 

현재 webtoons는

어떠한 데이터도 가지고 있지 않다.

 

즉, Future 타입의 데이터를

받지 못한것이다.

 

이러한 경우 우리는

 

Future Build를 사용할 수 있다.

 

위와 같이 body에 FutureBuilder()를

선언하고 살펴보면

 

Future<dynamic>을 future가

받는것을 확인할 수 있다.

 

우리의 webtoons는

Future<List<WebtoonModel>>이므로

 

위와 같이

FutureBuilder에게

webtoons를 기다려 달라고 할 수 있다.

 

이러한 FutureBuilder는

builder를 꼭 필요로 하는데,

 

여기서 snapshot이라는게 있다.

 

snapshot은 Future의 상태를 알 수 있는데

위와 같이 데이터를 받았는지,

에러가 있는지 등등의 기능을 제공한다.

 

그래서 위와 같이 조건문으로

snapshot.hasData가 참, 거짓일때

출력 Text를 다르게 하면?

 

위와 같이 앱 화면에서 출력해준다.

 

정말 간단하게

Future 데이터를 가져오고

setState도 쓸 필요없고

isLoading 조작도 안하고

비동기 기능까지 구현했다.

 

StatefulWidget을 쓸 필요 없이

간단하게 StatelessWidget으로 구현한 방식이다.