[flutter] FutureBuilder

jini.choi·2024년 3월 28일

FutureBuilder

FutureBuilder는 Flutter에서 비동기 작업의 결과를 기반으로 위젯을 빌드할 때 사용되는 위젯.
네트워크 요청을 통해 서버에서 데이터를 가져오는 작업은 Future를 사용하여 비동기적으로 처리된다.

구성요소

future

비동기 작업을 나타내는 Future 객체. FutureBuilder는 이 Future의 완료를 기다림

builder

Future의 상태(대기, 에러, 완료)에 따라 UI를 빌드한다.
BuildContext와 AsyncSnapshot 객체를 매개변수로 받는다.
AsyncSnapshot객체는 Future의 현재 상태와 데이터, 에러 등의 정보를 포함

FutureBuilder<String>(
  future: fetchUserData(), // fetchUserData는 Future<String>을 반환하는 함수
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      // Future가 아직 완료되지 않았을 때의 UI를 빌드.
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      // Future가 에러와 함께 완료되었을 때의 UI를 빌드.
      return Text('Error: ${snapshot.error}');
    } else {
      // Future가 성공적으로 완료되었을 때의 UI를 빌드.
      // snapshot.data에는 Future의 결과값이 포함.
      return Text('User Data: ${snapshot.data}');
    }
  },
)

fetchUserData() 함수는 사용자 데이터를 비동기적으로 가져오는 Future<String>을 반환
FutureBuilder는 fetchUserData()의 실행이 완료될 때까지 대기하고, 그 결과에 따라 다른 UI를 빌드

AsyncSnapshot

FutureBuilder 같은 비동기 위젯의 빌더 함수에 전달되는 객체.
이 객체는 비동기 계산의 가장 최신 상태를 담고 있으며, 데이터 에러 연결 상태 등의 정보를 포함한다.
AsyncSnapshot 객체를 통해 비동기 작업의 결과에 접근하고, 해당 결과를 기반으로 UI를 동적으로 구성할 수 있다.

주요 속성

data

비동기 연산으로 부터 반환된 데이터
연산이 성공적으로 완료되었을 때 이 속성을 통해 결과 데이터에 접근할 수 있다.

error

비동기 연산 중 발생하는 에러
연산이 에러와 함께 종료되었을 경우, 이 속성을 통해 에러 객체에 접근할 수 있다.

connectionState

비동기 연산의 현재 상태
ConnectionState.none, ConnectionState.waiting, ConnectionState.active, ConnectionState.done 중 하나의 값을 가지며, 이를 통해 연산이 시작되지 않았는지, 대기 중인지, 활성화 상태인지, 완료되었는지 알 수 있음

snapshot.hasData

비동기 작업의 결과가 존재하는지 여부를 확인하는데 사용되는 속성
비동기 연산으로부터 데이터가 성공적으로 반환되었고, 그 데이터가 null이 아닐 경우 true반환
true반환되면 비동기 작업이 성공적으로 완료되어 유효한 데이터를 받았다는 것을 의미

snapshot.connectionState == ConnectionState.done 안쓰고 snapshot.hasData 쓰는 이유

우선, 서로 다른 목적과 상황에서 사용됨
두 속성은 FutureBuilder같은 비동기 작업의 결과를 처리할 때 AsyncSnapshot의 상태를 확인하는 방법

snapshot.hasData 쓰는 이유

비동기 작업이 완료(ConnectionState.done) 됐다고 해서 반드시 유효한 데이터가 있는건 아님
예를 들어, 서버로부터 데이터를 요청했지만 서버가 아무런 데이터도 반환하지 않은 경우,
ConnectionState.done은 true일 수 있지만 snapshot.hasData는 false가 된다.
결국 snapshot.hasData를 사용하는 것은 비동기 작업의 완료뿐만 아니라, 유효한 데이터의 존재 여부까지 확인하고자 할 때 좀 더 적합한 방법

snapshot.connectionState == ConnectionState.done

이 조건은 비동기 작업이 완료되었는지 여부만 나타냄
ConnectionState.done 상태는 비동기 작업이 끝났음을 의미하지만,
성공적으로 데이터를 받았는지, 아니면 에러가 발생했는지 구분하지 않음
즉, 비동기 작업이 성공적으로 끝났을 수도 있고, 에러가 끝났을 수도 있고, 아무런 데이터도 반환하지 않을 수도 있음

snapshot.hasData

비동기 작업의 결과로 데이터가 실제로 반환 되었는지 여부를 나타냄
true일 경우, 비동기 작업으로 부터 데이터를 성공적으로 받았고, 그 데이터가 null이 아님을 의미한다.
이는 비동기 작업이 데이터와 함께 성공적으로 완료되었는지를 확인하는 좀 더 구체적인 방법을 제공한다.
따라서 UI를 업뎃하기전에 실제로 데이터를 사용할 수 있는지 확인할 때 유용