다트의 dart:async 라이브러리에서 FutureBuilder 사용 방법은?

Q1: FutureBuilder란 무엇인가요?
FutureBuilder는 Dart의 `dart:async` 라이브러리에서 비동기 작업(Future)의 상태를 빌드 과정에 반영하여 UI를 동적으로 업데이트할 때 사용하는 위젯입니다. Future의 완료 상태에 따라 자동으로 리빌드되어 간편하게 비동기 데이터 처리 결과를 화면에 출력할 수 있습니다.

Q2: FutureBuilder를 사용하려면 어떤 인자가 필요한가요?
- `future`: 비동기 작업을 나타내는 Future 객체입니다.
- `builder`: 빌드 시 호출되는 함수로, `BuildContext`와 `AsyncSnapshot`를 인자로 받아 위젯을 반환합니다. 여기서 `AsyncSnapshot`은 Future의 현재 상태와 데이터를 포함합니다.

Q3: FutureBuilder 기본 사용 예제는 어떻게 되나요?
```dart
FutureBuilder(
future: fetchData(), // 비동기 함수
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else if (snapshot.hasData) {
return Text('Data: ${snapshot.data}');
} else {
return Text('No data');
}
},
);
```

Q4: AsyncSnapshot에서 확인할 수 있는 주요 상태값은 무엇인가요?
- `connectionState`
- `none`: Future가 아직 시작 안 됨
- `waiting`: 비동기 작업 진행 중
- `active`: Stream에서만 의미, 작업 실행 중
- `done`: 작업 완료

- `hasData`: 데이터가 존재하는지 여부
- `data`: Future가 성공적으로 반환한 데이터
- `hasError`: 에러 발생 여부
- `error`: 발생한 에러 객체

Q5: FutureBuilder 사용 시 주의할 점은 무엇인가요?
- `future`가 바뀌지 않으면 FutureBuilder는 Future를 다시 호출하지 않으므로, 새로운 Future로 바뀔 때만 비동기 작업이 재실행됩니다.
- 비동기 작업이 매번 실행되어야 할 경우, `future`를 매번 새로 생성하거나 별도의 상태 관리가 필요할 수 있습니다.
- 너무 긴 비동기 작업이나 자주 리빌드되는 UI에서는 성능 저하를 유발할 수 있으니 상황에 맞게 사용해야 합니다.

Q6: FutureBuilder는 어디에 주로 사용되나요?
- 네트워크 API 호출 후 결과 표시
- 파일 읽기 등의 비동기 저장소 접근
- 초기 데이터 로딩 시 로딩 인디케이터와 오류 처리
- 비동기 계산 결과에 따른 동적 UI 변경

Q7: FutureBuilder를 사용해 여러 데이터를 동시에 처리할 수 있나요?
`future` 파라미터는 하나의 Future만 받으므로, 여러 데이터를 병렬로 처리하고 싶다면 `Future.wait`를 사용해 여러 Future를 하나로 합쳐야 합니다.

```dart
FutureBuilder> (
future: Future.wait([fetchData1(), fetchData2()]),
builder: (context, snapshot) {
// snapshot.data는 List 타입
},
);
```

---

요약하자면, FutureBuilder는 비동기 작업 결과를 UI에 반영할 때 매우 편리한 Flutter의 기본 위젯이며, `future`와 `builder`를 통해 상태별로 적절한 위젯을 출력할 수 있습니다. 위 상태 검사 패턴을 따라 사용하면 안정적으로 비동기 UI를 구현할 수 있습니다.

다트에서 Enum을 정의하는 방법은?

다트에서 커스텀 에러(Custom Error)를 만드는 방법은?

`FutureBuilder`는 Flutter에서 비동기 작업의 결과를 기반으로 UI를 구축하는 데 사용되는 위젯입니다.

주로 API 호출, 데이터베이스 쿼리, 파일 읽기 등과 같은 비동기 작업의 결과를 처리할 때 유용합니다.

`FutureBuilder`는 `Future` 객체를 사용하여 비동기 작업의 상태를 관리하고, 그 상태에 따라 UI를 업데이트합니다.

기본 사용법 `FutureBuilder`는 다음과 같은 주요 속성을 가집니다: - `future`: 비동기 작업을 수행하는 `Future` 객체입니다.

- `builder`: `AsyncSnapshot`을 인자로 받아 UI를 반환하는 함수입니다.

`AsyncSnapshot`은 비동기 작업의 상태와 결과를 포함합니다.

예제 코드 아래는 `FutureBuilder`를 사용하여 API에서 데이터를 가져오는 간단한 예제입니다.

```dart import 'package:flutter/material.dart'; import 'dart:async'; import 'dart:convert'; import 'package:http/http.dart' as http; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('FutureBuilder Example')), body: DataFetcher(), ), ); } } class DataFetcher extends StatelessWidget { Future> fetchData() async { final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts')); if (response.statusCode == 200) { List data = json.decode(response.body); return data.map((post) => post['title'] as String).toList(); } else { throw Exception('Failed to load data'); } } @override Widget build(BuildContext context) { return FutureBuilder>( future: fetchData(), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return Center(child: CircularProgressIndicator()); } else if (snapshot.hasError) { return Center(child: Text('Error: ${snapshot.error}')); } else if (snapshot.hasData) { final titles = snapshot.data!; return ListView.builder( itemCount: titles.length, itemBuilder: (context, index) { return ListTile(title: Text(titles[index])); }, ); } else { return Center(child: Text('No data found')); } }, ); } } ``` 코드 설명 1. Future 정의 : `fetchData` 메서드는 HTTP GET 요청을 통해 데이터를 가져오는 비동기 메서드입니다.

성공적으로 데이터를 가져오면 제목 목록을 반환합니다.



2. FutureBuilder 사용 : `FutureBuilder`는 `fetchData` 메서드를 호출하여 `Future`를 생성합니다.

`builder` 속성은 `AsyncSnapshot`을 사용하여 비동기 작업의 상태를 확인합니다.



3. 상태 처리 : - `ConnectionState.waiting`: 데이터가 로드되는 동안 로딩 인디케이터를 표시합니다.

- `snapshot.hasError`: 오류가 발생한 경우 오류 메시지를 표시합니다.

- `snapshot.hasData`: 데이터가 성공적으로 로드된 경우, 리스트 뷰를 생성하여 제목을 표시합니다.

추가 팁 - 상태 관리 : `FutureBuilder`는 상태를 관리하는 데 유용하지만, 복잡한 상태 관리가 필요한 경우 `Provider`, `Bloc`, `Riverpod`와 같은 상태 관리 패턴을 사용하는 것이 좋습니다.

- 재사용성 : `FutureBuilder`를 여러 곳에서 사용할 수 있지만, 비슷한 비동기 작업을 여러 번 호출하는 경우, `Future`를 외부에서 관리하여 중복 호출을 피하는 것이 좋습니다.

- UI 최적화 : 비동기 작업이 완료된 후 UI를 업데이트하는 방식에 따라 성능이 영향을 받을 수 있습니다.

필요한 경우 `setState`를 사용하여 UI를 수동으로 업데이트할 수 있습니다.

이와 같이 `FutureBuilder`는 Flutter에서 비동기 작업의 결과를 쉽게 처리하고 UI를 동적으로 업데이트하는 데 매우 유용한 도구입니다.