pickVideo와 async, await

pharmDev·2024년 11월 21일
onLogoTap() async {
    final video = await ImagePicker().pickVideo(
      source: ImageSource.gallery,
    );
   setState(() {
     this.video = video;
   });
  }
}

1. 비동기 작업의 필요성

ImagePicker().pickVideo는 사용자가 갤러리에서 비디오를 선택하는 과정을 실행합니다.

이 작업은 사용자가 비디오를 선택할 때까지 기다려야 합니다.
기다리는 동안 앱이 멈추지 않고, 다른 작업(예: UI 업데이트)을 계속 처리할 수 있도록 비동기로 실행됩니다.
Dart에서는 이런 시간이 오래 걸리는 작업(파일 선택, 네트워크 요청 등)을 비동기적으로 처리하기 위해 Future를 반환합니다.

pickVideo의 반환값 (flutter SDK 정의)


Future<XFile?> pickVideo({
  required ImageSource source,
})

pickVideo 함수는 Flutter의 image_picker 패키지에서 제공하는 함수로, 사용자가 비디오를 선택할 수 있게 해줘요.
비디오를 선택하는 건 시간이 걸리는 작업이기 때문에, 이 함수는 Future를 반환합니다.
Future<XFile?>: 비동기 작업이 끝나면, 결과로 XFile?을 약속합니다.

  • XFile?: 선택한 파일(여기서는 비디오 파일)을 나타냅니다.
    • null일 수도 있어요(사용자가 비디오를 선택하지 않았을 경우).
  • ImageSource source: 비디오를 가져올 위치를 지정합니다(예: 갤러리나 카메라).

Future를 반환하는 이유

Flutter에서 비동기 작업(Future)을 사용하는 이유는 바로 앱의 동작을 멈추지 않기 위해서입니다.

pickVideo가 실행되는 동안, 앱은 여전히 화면을 그리거나 사용자의 스크롤/입력을 처리할 수 있어야 합니다.
결과가 준비되면, Flutter가 "이제 결과가 준비되었으니 이걸 처리하세요"라고 알려줍니다.

간단한 비유:
1. 라면을 끓이는 동안 재료를 준비하거나 그릇을 꺼낼 수 있습니다.
2. Future 없이 기다린다면?
물이 끓을 때까지 아무 일도 못 하고 멍하니 기다려야 합니다.
3. Future로 처리한다면?
물이 끓는 동안 다른 일을 하다가, 물이 끓으면 바로 라면을 넣으면 됩니다.

"Flutter는 "비동기 작업(Future)을 줄 테니, 이 작업이 끝날 때까지 다른 일(UI 업데이트 등)을 먼저 하세요" 라고 말하는 거예요."

2. async의 역할

async는 함수가 비동기로 동작할 것임을 선언합니다.

함수에 async를 붙이면, 함수는 항상 Future를 반환하게 됩니다.
내부에서 await 키워드를 사용해 비동기 작업을 처리할 수 있습니다.

onLogoTap() async {
  ...
}

3. await의 역할

await는 비동기 작업이 완료될 때까지 기다리는 키워드입니다.

await을 사용하면 pickVideo 작업이 완료되기 전에는 다음 줄로 진행되지 않습니다.
Dart는await을 만나면 해당 작업이 끝날 때까지 다른 작업(UI 갱신 등)을 계속 처리하며 대기합니다.

비동기 동작 예시:

final video = await ImagePicker().pickVideo(
  source: ImageSource.gallery,
);

awaitpickVideo가 완료될 때까지 기다린 후, 선택한 비디오(XFile?)를 video 변수에 저장합니다.

4. setState와의 연결

선택한 비디오 파일이 준비되면 setState를 호출하여 UI를 갱신합니다.

이 과정은 사용자가 비디오를 선택한 이후에 실행되어야 하므로, await으로 비동기 작업이 완료된 후 처리됩니다.

왜 꼭 async/await을 써야 할까?

1. 비동기 작업의 결과를 기다려야 하기 때문
비동기 작업인 pickVideo가 완료된 후에야 결과(XFile)를 사용할 수 있습니다.
await을 사용하지 않으면 작업 완료를 기다리지 않고 다음 줄의 코드가 실행되므로, 비디오가 선택되기 전에 setState가 호출될 수 있습니다.

2. UI가 멈추지 않도록 하기 위해
사용자가 비디오를 선택하는 동안 앱이 멈추지 않고 다른 작업을 수행할 수 있습니다.

profile
코딩을 배우는 초보

0개의 댓글