StreamBuilder와 FutureBuilder의 차이점

FutureBuilder

FutureBuilder는 한 번에 한 개의 비동기 작업을 처리하는 데 사용됩니다. Future는 단일 비동기 연산의 완료를 나타내며, 완료되면 값을 반환합니다. FutureBuilder는 다음과 같은 경우에 유용합니다:

• 서버로부터 한 번 데이터를 가져오는 경우
• 파일 읽기와 같은 단일 비동기 작업

FutureBuilder<String>(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot<String> 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');
    }
  },
);

위 예시에서 fetchData() 함수는 Future<String>을 반환하고, FutureBuilder는 해당 Future가 완료될 때까지 기다린 후 결과를 빌드합니다.

 

1. FutureBuilder주요 특징
   1. 데이터 제공 방식:
   Future 객체를 사용하여 비동기 작업을 수행합니다.
   1. 상태:
   initial: 처음 위젯이 생성된 상태로, Future가 아직 시작되지 않은 상태.done: Future가 완료된 상태로, 결과를 얻을 수 있는 상태.
   1. 빌더 패턴:
   FutureBuilder의 builder 함수는 AsyncSnapshot을 인자로 받아 현재 상태를 기반으로 UI를 빌드합니다.
2. AsyncSnapshot의 connectionState 속성을 통해 상태를 확인하고, hasData와 hasError 속성을 통해 데이터 유무와 오류를 처리할 수 있습니다.
3. error: Future가 오류로 인해 완료된 상태.
4. waiting: Future가 완료되기를 기다리는 상태.
5. 비동기 작업이 완료되면 결과를 반환합니다.
6. FutureBuilder는 단일 비동기 작업을 수행하고 그 결과를 처리하기 위한 위젯입니다. 주로 한 번의 데이터 로드 또는 연산 결과를 기다리는 데 사용됩니다.

 

StreamBuilder

StreamBuilder는 연속적인 비동기 데이터 흐름을 처리하는 데 사용됩니다. Stream은 여러 값의 비동기 시퀀스를 나타내며, 데이터가 이벤트로 지속적으로 전달됩니다. StreamBuilder는 다음과 같은 경우에 유용합니다:

• 실시간 데이터 업데이트 (예: 채팅 메시지, 센서 데이터 등)
• 데이터 스트림을 지속적으로 수신하여 업데이트가 필요한 경우

StreamBuilder

StreamBuilder는 여러 비동기 이벤트의 시퀀스를 처리하는 데 사용됩니다. 이는 실시간 데이터 스트림을 처리할 때 특히 유용합니다.

주요 특징

1. 데이터 제공 방식:

Stream 객체를 사용하여 여러 비동기 이벤트를 처리합니다.

새로운 데이터가 스트림을 통해 전송될 때마다 UI를 업데이트합니다.

1. 상태:

initial: 처음 위젯이 생성된 상태로, 첫 번째 이벤트를 기다리는 상태.

waiting: 스트림의 첫 번째 이벤트를 기다리는 상태.

active: 스트림이 활성화되어 데이터를 지속적으로 수신하는 상태.

done: 스트림이 완료된 상태.

error: 스트림 처리 중 오류가 발생한 상태.

1. 빌더 패턴:

StreamBuilder의 builder 함수는 AsyncSnapshot을 인자로 받아 현재 상태를 기반으로 UI를 빌드합니다.

AsyncSnapshot의 connectionState 속성을 통해 상태를 확인하고, hasData와 hasError 속성을 통해 데이터 유무와 오류를 처리할 수 있습니다.

사용 예시:

StreamBuilder<int>(
  stream: counterStream(),
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else if (snapshot.hasData) {
      return Text('Counter: ${snapshot.data}');
    } else {
      return Text('No data');
    }
  },
);

위 예시에서 counterStream() 함수는 Stream<int>를 반환하며, StreamBuilder는 스트림에서 데이터가 도착할 때마다 빌드됩니다.

요약

• FutureBuilder: 단일 비동기 작업의 결과를 처리. Future가 완료되면 빌드.
• StreamBuilder: 연속적인 비동기 데이터 흐름을 처리. Stream에서 데이터가 도착할 때마다 빌드.

구체적인 차이점

데이터 흐름:

FutureBuilder: 단일 비동기 작업(Future)을 수행하고 완료되면 결과를 반환합니다.

StreamBuilder: 연속적인 비동기 데이터 흐름(Stream)을 처리하며, 새로운 데이터 이벤트가 발생할 때마다 UI를 업데이트합니다.

업데이트 빈도:

FutureBuilder: Future가 완료되면 한 번만 UI를 업데이트합니다.

StreamBuilder: 스트림에 새로운 데이터가 도착할 때마다 지속적으로 UI를 업데이트합니다.

사용 시기:

FutureBuilder: 단일 비동기 작업이 필요할 때, 예를 들어 서버로부터 데이터를 한 번 가져오거나 파일을 읽는 경우에 사용됩니다.

StreamBuilder: 지속적인 데이터 업데이트가 필요한 경우, 예를 들어 실시간 채팅 메시지, 센서 데이터, 주식 가격 업데이트 등에서 사용됩니다.

상태 관리:

FutureBuilder: connectionState가 waiting, done, error 상태로 구분됩니다.

StreamBuilder: connectionState가 waiting, active, done, error 상태로 구분되며, 특히 active 상태는 데이터가 지속적으로 수신되는 경우에 유용합니다.

내부 구현 차이

• FutureBuilder:
• FutureBuilder는 State 객체 내에서 Future를 추적합니다.
• Future의 완료 시점을 감지하고, 완료되면 setState를 호출하여 UI를 다시 빌드합니다.
• StreamBuilder:
• StreamBuilder는 Stream을 구독(subscribe)합니다.스트림 구독을 해제(dispose)하는 방법을 포함하여 메모리 누수를 방지합니다.
• 스트림에 새로운 데이터 이벤트가 도착할 때마다 setState를 호출하여 UI를 업데이트합니다.

이러한 차이점을 이해하면, 어떤 상황에서 FutureBuilder와 StreamBuilder를 사용하는 것이 적합한지 명확하게 판단할 수 있습니다. 각 위젯은 특정 유형의 비동기 작업을 처리하는 데 최적화되어 있으므로, 사용 사례에 맞게 선택하는 것이 중요합니다.

이 두 위젯은 Flutter에서 비동기 데이터를 처리할 때 매우 유용하며, 각각의 사용 상황에 맞게 선택하여 사용할 수 있습니다.