PLAY STEEM 개발자 이타인클럽입니다.

Flutter로 STEEM 웹앱을 개발하고 있습니다.

async, await

async와 await 개념에 대한 자세한 내용은 아래 글에 있습니다. 매우 잘 정리되어 있습니다.
Flutter/Dart 에서의 Future, async/await

여기서는 async, await 개념을 설명하진 않습니다. 위 글을 참고해주세요.

자바스크립트에서 비동기적 처리를 위해 Promise라는 것이 있는데, 플러터에는 이와 동일한 개념으로 Future라는 것이 있습니다.
그런데 플러터에는 새로운 것이 있습니다.
바로 Future의 내용이 들어오면 UI를 빌드해주는 FutureBuilder입니다.
여기에 어떤 데이터가 Stream으로 들어올 수도 있는데, 이를 위해서 StreamBuilder라는 것도 있습니다.

FutureBuilder

FutureBuilder에 대해서만 소개하겠습니다.

자바스크립트에서는 화면에 데이터를 표시하기 위해서 await를 써서 결과가 나올 때까지 기다리거나, 아니면 then() 구문을 써서 결과가 나오면 값을 받아서 화면에 표시해줘야 했습니다.

Flutter는 UI단에서 Future 변수를 사용하여 Future 변수에 값이 들어오면 UI를 빌드해주는 기능이 있습니다. 그래서 await를 쓰지 않아도 됩니다! await를 쓴다는 것은 해당 데이터를 얻기 위해 다른 것을 실행하지 않고 기다려야만 한다는 것입니다. 그런데 플러터에서는 이런 기다림이 필요없다는 말입니다.

Firebase Firestore 예

FutureBuilder를 다음과 같이 Firebase의 Firestore에 저장되어 있는 데이터를 표시하는데 사용할 수 있습니다.

          final postRef= firestore.collection('users').doc('etainclub');

          return FutureBuilder(
            future: postRef.get(),
            builder: (BuildContext context,
                AsyncSnapshot<DocumentSnapshot> snapshot) {
              return Container(
                margin: EdgeInsets.all(5.0),
                height: 250.0,
                width: double.infinity,
                child: _buildCategoryPostCard(snapshot.data, category),
              );
            },
          );

위 코드에서 postRef는 데이터가 있는 곳을 가리키는 레퍼런스입니다. 레퍼런스의 데이터를 얻기 위해서는 보통은 다음과 같이 합니다.

final post = await postRef.get();

그런데 코드에서는 await를 사용하지 않고, future: postRef.get()으로 사용하고 있습니다. 바로 FutureBuilder를 사용하는 방법입니다. postRef.get()의 리턴값은 Future 타입입니다. 이걸 FutureBuilder 입력으로 넣어주면 알아서 내용이 들어오면 UI를 표시해 줍니다.

값을 얻을 때까지 기다렸다가 (await를 사용하거나, then을 사용하거나) 화면에 표시해줄 필요가 없는 것입니다. 그냥 Future 타입 데이터를 FutureBuilder에 입력만 하면 됩니다.

장점은, 데이터가 들어올 때까지 기다리는 코드를 고민하지 않아도 되는 것입니다. 플러터에서는 데이터가 들어오면 알아서 자동으로 화면에 표시해 주게 되니까요.

---

새로운 웹앱에서는 Firebase Firestore를 많이 사용하고 있습니다. 그래서 FutureBuilder나 StreamBuilder를 적절히 사용해주는 것이 큰 도움이 됩니다.

cc.
@steemcurator01