플러터 기초 - FutureBuilder를 사용한 비동기 작업 수행

플러터에서는 StatelessWidget을 사용하더라도 비동기 작업을 할 수 있는 방법이 존재한다.

 

바로 FutureBuilder를 사용하는 것이다.

 

StatefulWidget 대신 FutureBuilder를 사용하면 다음과 같은 이점이 존재한다.

 

• StatefulWidget 대신 코드를 관리하기 편하고 비동기 작업이 단순해진다.
• StatefulWidget 과 비교하여 좀 더 나은 효율을 갖고 있다.

---

FutureBuilder 사용하는 방법

FutureBuilder를 사용하기 위해서는 Future 데이터를 받아오는 객체가 하나 필요하다.

 

다음과 같이 오늘의 웹툰 데이터를 받아오는 객체가 있다고 생각하자.

 

Future<List<WebtoonModel>> webtoons = ApiService().getTodaysToons();

 

위 객체를 사용해서 FutureBuilder를 만들면 다음과 같이 만들 수 있다.

 

FutureBuilder(
    future: webtoons,
    // snapshot: Future의 상태를 알려준다.
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return const Text("it has data");
      }
      return const Text("Loading");
    },
)

 

future 인자에는 위에서 받아온 Future 객체를 넣어준다.

 

(해당 Future 데이터를 감시해라는 의미를 갖는다.)

 

snapshot은 해당 데이터의 변화를 감지한다.

---

FutureBuilder를 사용할 때 주의 사항

snapshot은 데이터를 영원히 감시하지 않는다.

위와 같은 특징 때문에 FutureBuilder를 StatefulWidget을 대신하여 사용할 수 없다.

 

FutureBuilder는 데이터가 들어왔음을 감지한 이후에는 더이상 해당 데이터를 추적하지 않는다.

 

대신 데이터가 없다가 들어온 상태를 매우 간결하고 직관적으로 표현할 수 있는 장점을 갖고 있다.

 

FutureBuilder가 StatefulWidget보다 더 나은 효율을 보여주는 이유는?

StatefulWidget은 setState()가 발동할 때 마다 모든 위젯을 새롭게 re-draw 한다.

 

하지만 FutureBuilder는 해당 위젯만 re-make 한다.

 

그렇기 때문에 해당 위젯만 re-make 하는 FutureBuilder가 더 나은 효율을 보여준다.

---

 

플러터 기초 - ListView 위젯 사용하기