[Flutter] snapshot 란?

Flutter의 snapshot

Flutter에서 snapshot은 FutureBuilder나 StreamBuilder와 같은 위젯에서 비동기 작업의 현재 상태와 결과를 담고 있는 객체입니다. 비동기 작업이 진행되는 동안 snapshot을 통해 작업의 상태를 추적하고, 그에 따라 UI를 동적으로 업데이트할 수 있습니다.

 

 

 

 

snapshot의 주요 역할

• 비동기 작업의 상태 관리: snapshot은 비동기 작업이 어떻게 진행되고 있는지를 나타냅니다.
• 결과 데이터 제공: 비동기 작업이 완료되면 snapshot을 통해 결과 데이터를 제공받을 수 있습니다.
• 에러 관리: 비동기 작업 중 에러가 발생하면, snapshot을 통해 에러 정보를 처리할 수 있습니다.

 

 

 

 

 

 

snapshot의 주요 속성

• connectionState: 비동기 작업의 현재 상태를 나타냅니다. 가능한 값은 다음과 같습니다:
  • ConnectionState.none: 아직 작업이 시작되지 않은 상태입니다.
  • ConnectionState.waiting: 작업이 진행 중이며, 결과를 기다리는 상태입니다.
  • ConnectionState.active: 작업이 활성 상태로, 주로 Stream에서 사용됩니다.
  • ConnectionState.done: 비동기 작업이 완료된 상태입니다.
• data: 비동기 작업이 완료되었을 때의 결과 데이터입니다.
• hasData: snapshot이 데이터를 가지고 있는지 여부를 나타냅니다. 데이터가 있으면 true, 없으면 false를 반환합니다.
• hasError: 비동기 작업 중 에러가 발생했는지 여부를 나타냅니다. 에러가 발생하면 true, 그렇지 않으면 false를 반환합니다.
• error: 비동기 작업 중 발생한 에러 정보를 제공합니다.

 

 

 

 

 

 

snapshot 사용 예시

다음은 FutureBuilder에서 snapshot을 사용하여 데이터를 처리하는 예시입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Future fetchData() async {
    await Future.delayed(Duration(seconds: 2));  // 2초 후 데이터 반환
    return '데이터가 로드되었습니다';
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('snapshot 예제'),
        ),
        body: Center(
          child: FutureBuilder(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();  // 대기 중일 때 로딩 표시
              } else if (snapshot.hasError) {
                return Text('에러 발생: ${snapshot.error}');
              } else if (snapshot.hasData) {
                return Text('데이터: ${snapshot.data}');  // 데이터를 성공적으로 받았을 때
              } else {
                return Text('데이터 없음');
              }
            },
          ),
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

snapshot 속성의 예시

비동기 작업의 상태를 추적하고, 그에 따라 적절한 UI를 표시할 수 있습니다. 위 예시에서 snapshot.connectionState와 snapshot.hasData, snapshot.hasError를 사용하여 작업의 진행 상태에 따라 다르게 UI를 렌더링하고 있습니다.

 

 

 

 

 

 

 

 

결론

snapshot은 Future나 Stream의 상태와 결과를 추적하여 Flutter 애플리케이션에서 비동기 데이터를 처리할 수 있도록 도와줍니다. 이를 통해 비동기 작업의 진행 상태에 따라 UI를 동적으로 업데이트할 수 있습니다.