FutureBuilder

하요·2024년 6월 1일

AsyncSnapshot buildcontext flutter futurebuilder

Flutter Widget of the Week

목록 보기

7/18

Flutter에서 비동기 데이터 처리하기: FutureBuilder

비동기 데이터를 활용하여 Flutter 앱에서 동적인 콘텐츠를 처리하는 것은 중요한 과제입니다. FutureBuilder 위젯은 비동기 데이터를 효율적으로 처리하고 사용자 인터페이스를 업데이트하는 데 유용합니다. 이 위젯은 미래에 완성될 데이터 (Future)와 연결되며, 데이터의 상태에 따라 다른 위젯을 보여줄 수 있습니다.

주요 속성

future: 데이터를 가져오는 Future 객체입니다. 이 속성은 데이터의 비동기 처리를 담당합니다.
builder: BuildContext와 AsyncSnapshot을 파라미터로 받는 함수입니다. 이 함수는 데이터의 로드 상태에 따라 화면에 표시할 위저트를 반환합니다.
initialData: 초기 데이터 값을 설정할 수 있으며, 데이터 로드 전에 표시됩니다.

주요 활용도

서버에서 데이터 로드: 웹서버나 데이터베이스에서 정보를 가져올 때 사용됩니다.
동적인 사용자 인터페이스 제공: 데이터 로드 상태에 따라 다른 인터페이스를 동적으로 표시합니다.
비동기 작업의 상태 관리: 데이터 로딩, 데이터 완료, 에러 상태 등을 관리할 수 있습니다.

코드 예제

아래 예제는 FutureBuilder를 사용하여 네트워크에서 데이터를 비동기적으로 가져오고, 그 결과를 기반으로 사용자 인터페이스를 구성하는 방법을 보여줍니다.

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // 네트워크 지연 모방
  return "데이터 로드 완료";
}

Scaffold(
  body: FutureBuilder<String>(
    future: fetchData(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Center(child: CircularProgressIndicator());
      } else if (snapshot.hasError) {
        return Center(child: Text('데이터 로드 중 오류 발생'));
      } else {
        return Center(child: Text(snapshot.data!)); // 데이터 표시
      }
    },
  ),
)

위젯 리빌딩 시기

Future와 FutureBuilder의 독립적 타이밍:
- Future는 데이터를 비동기적으로 로드하는 작업을 대표합니다 (예: 네트워크에서 데이터 가져오기).
- FutureBuilder는 이 Future의 완료 여부를 기다리면서, 완료 상태에 따라 UI를 다르게 보여줍니다.
- Future가 완료되면 (Future가 결과를 반환할 때), setState()를 통해 위젯을 다시 빌드해야 합니다. 이는 Flutter가 Future의 결과에 따라 UI를 업데이트하도록 스케줄링하는 과정입니다.
- 그러나 FutureBuilder의 builder 함수가 호출되는 시점은 Flutter의 내부 로직에 의해 결정됩니다. 즉, Future의 상태 변화가 있을 때마다 정확히 일치하는 순간에 builder가 호출되는 것이 아니라, Flutter가 필요하다고 판단하는 시점에 호출됩니다.

추가 팁

오류 처리: FutureBuilder를 사용할 때는 데이터 로드 실패 상황을 고려하여 오류 처리 로직을 추가하는 것이 중요합니다.
상태 관리: Future의 상태에 따라 사용자에게 적절한 피드백을 제공하는 것이 사용자 경험을 개선합니다.
사이드 이펙트: 이미 완료된 Future를 FutureBuilder에 전달하는 경우, 초기 빌드에서는 대기 상태로 처리될 수 있으므로 이를 고려해 설계해야 합니다.