[Flutter] MVVM - 초기 데이터 로딩 구현하기 (initState)

민태호·2025년 4월 29일
0

Flutter

목록 보기
17/23
post-thumbnail

Provider를 사용한 MVVM구조로 개발 중에, 화면이 처음 로드될 때 초기 데이터를 불러오는 작업이 필요했다.

enum으로 로딩과 같은 작업 상태가 관리되고, 데이터를 불러오는 fetchData함수가 구현된 ViewModel이 아래와 같이 있다고 가정하겠다.

enum ViewModelState { idle, loading }

class ViewModel extends ChangeNotifier {

	ViewModelState state = ViewModelState.idle;
    
    Future<void> fetchData() async {
     	
		ViewModelState state = ViewModelState.loading;
    	notifyListeners();
        
		// 작업
        
		ViewModelState state = ViewModelState.idle;
        notifyListeners();
	}
}

이 상태에서 나는 fetchData 함수에 초기 로딩을 수행할 수 있도록 구현했다.

해결

enum ViewModelState { idle, loading }

class ViewModel extends ChangeNotifier {

	ViewModelState state = ViewModelState.loading;
    // 처음 상태를 로딩 상태로 설정
    
    Future<void> fetchData({bool initialize = false}) async {
    	// 초기 로딩모드가 아닐 경우에만 로딩 상태로 변경
     	if(!initialize) {
			ViewModelState state = ViewModelState.loading;
    		notifyListeners();
        }
        
		// 작업
        
		ViewModelState state = ViewModelState.idle;
        notifyListeners();
	}
}

위 처럼 초기 로딩 시점과, 그냥 데이터 로딩 시점을 구분하였다.
사용할 때에는 아래처럼 initState 안에서 실행하면 된다.

  
  void initState() {
    super.initState();
    // 화면이 전부 빌드된 후에 실행할 수 있도록 addPostFrameCallback을 사용
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<ViewModel>(context, listen: false).fetchData(initialize: true);
  }

+ 혹시 더 효율적인 방법이 있다면 댓글로 알려주세요

profile
지렁이도 성장하고 싶으면 꿈틀거린다

0개의 댓글