[Flutter] addPostFrameCallback, widget이 빌드된 후에 작업이 필요할때

 

이슈발생

특정 화면에 진입 시 구독하고 있는 riverpod 상태를 초기화 할 필요가 있어 다음과 같이 코드를 작성하였습니다. 참고로 이때는 riverpod의 autoDispose 기능을 몰랐었네요. 공식문서의 중요성을 다시 한 번 깨달았습니다.

 

  @override
  void initState() {
    super.initState();
    ref.read(diaryCreateViewModelProvider.notifier).handleReset();
  }

 

View에서 최초로 한번만 실행하면 되기에 initState시 viewModel의 reset함수를 작동시키자 다음과 같이 에러가 발생하였습니다.

 

 

이슈파악

에러 메세지를 통해 이슈를 파악해보겠습니다. Tried to modify a provider while the widget tree was building. 위젯트리가 전부 빌드되기 전에 provider 상태를 수정하려고 했기 때문에 발생하였습니다.

 

initState 메소드는 State 객체가 초기화될 때 호출되며, 일회성 작업을 수행하는데 주로 사용됩니다. 그리고 Flutter에서는 다음과 같은 라이프 사이클 동안에 provider의 상태 변경을 금지하고 있습니다.

 

- build

- initState

- dispose

- didUpdateWidget

- didChangeDependencies

 

만약 구독중인 provider의 상태가 라이프 사이클동안 변화한다면 상태 불일치, 불필요한 위젯 리렌더링 등 부수적인 사이드 이펙트가 발생할 수 있습니다. Flutter 앱의 최적화에도 영향을 줄 수 있으니 위젯들이 모두 빌드된 이후 provider의 값을 변화시켜줘야 합니다.

 

addPostFrameCallback

위젯이 빌드된 이후에 콜백함수를 실행하기 위해선 addPostFrameCallback 메소드를 사용하면 됩니다. WidgetsBinding이라는 클래스(?)에서 제공하는 메소드인데 생소하여 찾아보니 위젯과 Flutter 엔진 사이의 접착제 역할을 하는군요.

 

@override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ref.read(diaryCreateViewModelProvider.notifier).handleReset();
    });
  }

 

 

마치며

위젯의 빌드 후에 안전하게 콜백을 실행시키는 addPostFrameCallback 메소드에 대해 살펴봤습니다. Flutter의 내부동작과 라이프 사이클에 대해 좀 더 공부해야겠다는 생각이 들었네요. React에 익숙해져있다보니 initState가 빈 배열의 useEffect와 비슷한 동작을 할 거라고 생각했습니다. 각각의 고유한 라이프사이클과 차이점에 대해서도 염두해두면 개발할 때 도움이 될 것 같습니다.

 

 

오신김에 제가 만든 Flutter 앱도 구경하고 가시지요 :)

 

https://apps.apple.com/kr/app/%ED%83%80%EC%9D%B4%EB%B8%8C%EB%A0%88%EC%9D%B4%ED%81%AC/id6476483336

‎타이브레이크

 

https://play.google.com/store/apps/details?id=com.app.tiebreak&pcampaignid=web_share

타이브레이크 - Google Play 앱

 

https://teveloper.tistory.com/70

[1인 앱 개발] 테니스장 앱 '타이브레이크' 출시 후기 (1)