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

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

`FutureBuilder`는 Flutter에서 <a href='https://sangseek.com/sangseeks/비동기 작업/ko'>비동기 작업</a>의 결과를 기반으로 UI를 구축하는 데 사용되는 위젯입니다. 주로 API 호출, 데이터베이스 쿼리, 파일 읽기 등과 같은 비동기 작업의 결과를 처리할 때 유용합니다. `FutureBuilder`는 `Future` 객체를 사용하여 비동기 작업의 상태를 관리하고, 그 상태에 따라 UI를 업데이트합니다.           기본 사용법    `FutureBuilder`는 다음과 같은 주요 속성을 가집니다:    - `future`: 비동기 작업을 수행하는 `Future` 객체입니다.  - `builder`: `AsyncSnapshot`을 인자로 받아 UI를 반환하는 함수입니다. `AsyncSnapshot`은 비동기 작업의 상태와 결과를 포함합니다.           <a href='https://sangseek.com/sangseeks/예제 코드/ko'>예제 코드</a>    아래는 `FutureBuilder`를 사용하여 API에서 데이터를 가져오는 간단한 예제입니다.    ```dart  import 'package:flutter/materi<a href='https://sangseek.com/sangseeks/al/ko'>al</a>.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<List<String>> <a href='https://sangseek.com/sangseeks/fetchData/ko'>fetchData</a>() async {      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));            if (response.statusCode == 200) {        List<dynamic> data = json.decode(response.body);        return data.map((post) => post['title'] as String).toList();      } else {        throw <a href='https://sangseek.com/sangseeks/Except/ko'>Except</a>ion('Failed to load data');      }    }      @override    Widget build(BuildContext context) {      return FutureBuilder<List<String>>(        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 <a href='https://sangseek.com/sangseeks/GET 요청/ko'>GET 요청</a>을 통해 데이터를 가져오는 비동기 메서드입니다. 성공적으로 데이터를 가져오면 제목 목록을 반환합니다.    2.   FutureBuilder 사용  : `FutureBuilder`는 `fetchData` 메서드를 호출하여 `Future`를 생성합니다. `builder` 속성은 `AsyncSnapshot`을 사용하여 비동기 작업의 상태를 확인합니다.    3.   상태 처리  :     - `ConnectionState.waiting`: 데이터가 로드되는 동안 로딩 <a href='https://sangseek.com/sangseeks/인디케이터/ko'>인디케이터</a>를 표시합니다.     - `snapshot.hasError`: 오류가 발생한 경우 오류 메시지를 표시합니다.     - `snapshot.hasData`: 데이터가 성공적으로 로드된 경우, 리스트 뷰를 생성하여 제목을 표시합니다.           추가 팁    -   상태 관리  : `FutureBuilder`는 상태를 관리하는 데 유용하지만, 복잡한 상태 관리가 필요한 경우 `Provider`, `Bloc`, `Riverpod`와 같은 상태 관리 패턴을 사용하는 것이 좋습니다.  -   재사용성  : `FutureBuilder`를 여러 곳에서 사용할 수 있지만, 비슷한 비동기 작업을 여러 번 호출하는 경우, `Future`를 외부에서 관리하여 중복 호출을 피하는 것이 좋습니다.  -   UI 최적화  : 비동기 작업이 완료된 후 UI를 업데이트하는 방식에 따라 성능이 영향을 받을 수 있습니다. 필요한 경우 `<a href='https://sangseek.com/sangseeks/setState/ko'>setState</a>`를 사용하여 UI를 수동으로 업데이트할 수 있습니다.    이와 같이 `FutureBuilder`는 Flutter에서 비동기 작업의 결과를 쉽게 처리하고 UI를 동적으로 업데이트하는 데 매우 유용한 도구입니다.