[Flutter] Don't use 'BuildContext's across async gaps 이슈

임효진·2024년 3월 13일
0

이슈

목록 보기
2/5

Don't use 'BuildContext's across async gaps.
Try rewriting the code to not reference the 'BuildContext'.

비동기 작업 후, UI업데이트를 시도하면 종종 이런 경고 문구를 볼 수 있다.

발생 이유

Flutter에서 'BuildContext's across async gaps' 오류는 비동기 작업 수행 중에 BuildContext를 참조할 때 발생한다.
기술적으로, Flutter의 위젯 트리는 동적이며, 위젯은 재구성될 수 있고,
비동기 작업이 완료되기 전에 위젯 트리에서 해당 위젯이 제거되거나 다시 생성될 수 있다.
이 경우, 비동기 작업이 시작될 때 사용된 BuildContext는 더 이상 유효하지 않거나,
예상과 다른 부분의 위젯 트리를 가리킬 수 있다.

발생 이유

Flutter 앱에서 비동기 함수(예: Future.delayed, async/await) 내에서 BuildContext를 참조하고, 비동기 작업 완료 후 UI 업데이트를 시도할 때 발생한다.
이러한 비동기 작업이 완료되는 동안 현재 위젯이 위젯 트리에서 제거되었거나,
다시 구성되어 해당 BuildContext가 더 이상 유효하지 않게 될 수 있다.

해결책

BuildContext가 유효한지 확인: 비동기 작업 후 UI를 업데이트하기 전에, 해당 위젯의 BuildContext가 여전히 유효한지 확인한다.
예를 들어, mounted 속성을 사용하여 위젯이 현재 위젯 트리에 마운트되어 있는지
확인할 수 있다.

if (mounted) {
  // UI 업데이트 로직
}

//Widget
if (context.mounted) {
  // UI 업데이트 로직
}

StatelessWidget을 StatefulWidget으로 변경:

비동기 작업 결과를 화면에 반영하기 위해선, 상태를 관리할 필요가 있다. StatelessWidget에서는 mounted 속성을 사용할 수 없으므로,
필요에 따라 StatefulWidget으로 변경하는 것이 좋다.

BuildContext를 직접 전달하지 않기:

비동기 작업을 수행하는 함수로 BuildContext를 직접 전달하는 대신,
필요한 데이터나 콜백만을 전달하고,
비동기 작업 완료 후의 UI 업데이트는 StatefulWidget의 상태 관리를 통해 수행한다.

GlobalKey 사용:

특정 상황에서 BuildContext 대신 GlobalKey를 사용하여 위젯의 상태에
접근하는 방법도 있다.
하지만, 이 방법은 특별한 경우에만 권장되며, 남용하지 않도록 주의해야 한다.

위 해결책을 적용함으로써, 비동기 작업 후에도 안정적으로 UI를 업데이트하고, 'BuildContext's across async gaps' 오류를 방지할 수 있다.

profile
네트워크 엔지니어에서 풀스택 개발자로

0개의 댓글