외부 통신을 통해 JSON 파싱하기

  Future<List<dynamic>> fetchAlbums() async {
    final uri = Uri.parse('https://jsonplaceholder.typicode.com/albums');
    List albumList = [];

    final response = await http.get(uri);

    if (response.statusCode == 200) {
      albumList = json.decode(response.body);
      return albumList;
    } else {
      throw Exception('실패 ');
    }
  }

  @override
  Widget setBuild() {
    return FutureBuilder<List<dynamic>>(
      future: fetchAlbums(),
      builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
        //데이터를 아직 받아 오지 못해쓸 때 실행 되는 부분
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {         // 데이터 성공
          List? data = snapshot.data;
          if (data == null || data.isEmpty) {
            return const Text('데이터없음');
          } else {
            return ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return ListTile (
                    title : Text(data[index]['title'])
                );
              },
            );
          }
        }
      },
    );
  }

Widget setBuild(): 이 메서드는 Widget을 반환하는 메서드로, setBuild라는 이름으로 정의되어 있습니다. 일반적으로 위젯을 반환하는 메서드는 build 메서드로 명명되지만, 여기서는 이름이 setBuild로 지정되어 있는데, 이 부분은 사용자 정의한 것이며 일반적인 관행과는 다를 수 있습니다.

return FutureBuilder<List<dynamic>>(...): 이 줄은 FutureBuilder 위젯을 반환합니다. FutureBuilder는 비동기 작업을 처리하고, 해당 작업이 완료되면 화면을 업데이트하는 데 사용됩니다. 이 FutureBuilder는 제네릭 형식으로 List<dynamic>을 사용합니다.

future: fetchAlbums(),: FutureBuilder의 future 속성은 비동기 작업을 수행하는 함수 fetchAlbums()를 지정합니다. 이 함수는 앨범 데이터를 가져오는 비동기 작업을 수행하고 데이터를 반환합니다.

builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {: FutureBuilder의 builder 속성은 snapshot 매개변수를 사용하여 화면을 빌드합니다. snapshot은 비동기 작업의 현재 상태와 결과를 포함하는 객체입니다.

if (snapshot.connectionState == ConnectionState.waiting) { ... }: 이 부분은 snapshot의 connectionState가 ConnectionState.waiting 상태인 경우, 로딩 중을 나타내는 CircularProgressIndicator 위젯을 반환합니다.

else if (snapshot.hasError) { ... }: 이 부분은 snapshot에서 에러가 발생한 경우, 에러 메시지를 표시하는 Text 위젯을 반환합니다.

List? data = snapshot.data;: 이 줄에서는 snapshot의 데이터를 data 변수에 할당합니다. snapshot.data는 비동기 작업 결과를 나타내며 List<dynamic> 형식으로 선언되어 있습니다.

if (data == null || data.isEmpty) { ... }: data가 null이거나 비어있는 경우, '데이터없음'을 나타내는 Text 위젯을 반환합니다.

return ListView.builder(...): 이 부분은 데이터가 성공적으로 불러와진 경우, ListView.builder 위젯을 반환합니다. 이 위젯은 데이터 목록을 화면에 표시하며, 데이터를 리스트 형태로 표시합니다.

itemCount: data.length,: ListView.builder의 itemCount 속성은 데이터 리스트의 길이를 지정합니다.

itemBuilder: (context, index) { ... }: ListView.builder의 itemBuilder 속성은 각 항목을 생성하는 함수를 지정합니다. index를 이용하여 데이터 리스트의 각 항목을 생성하고, ListTile 위젯을 반환합니다.

title: Text(data[index]['title']): 각 항목에 대한 제목을 ListTile 위젯 내에서 생성하고, 데이터 리스트의 'title' 속성을 사용하여 텍스트를 설정합니다. 이것은 리스트의 각 항목에 해당하는 제목을 표시합니다.