Flutter Provider + '?' 패턴 (feat. ChangeNotifier, Mobx, BLoC, etc..)

 

Flutter를 하면 항상 던지게 되는 질문이 있습니다. 어떻게 상태관리 패턴을 구축할지에 대한 답입니다. 그리고 아래가 그에 대한 대답입니다. 

 

 

그래도 구글은 매 I/O 때마다 상태관리 패턴에 대해서 소개해왔습니다. 

다음은 각 년도별 소개된 패턴입니다. 

 

2018 

2018 Google I/O (ScopedModel, BLoC)

 

 

2019

2019 Google I/O (Provider+ChangeNotifier)

 

2019 I/O. Provider+ChangeNotifier가 예시로 소개됐습니다. 언뜻 보면 이 자체로 Provider패턴의 완성으로 보입니다. 하지만 간과하고 있는게 있습니다. Provider는 패턴이 아니라 패키지입니다. Provider+ChangeNotifier가 패턴이지 Provider는 InheritedWidget을 Wrap한 라이브러리입니다. 이 뜻은. Provider+ '?'가 가능하다는 것 입니다. Provider+BLoC 혹은 Provider+Mobx 이외에도 여러가지의 패턴들이 Provider와 결합될 수 있습니다. 그렇다면 어떤 패턴을 사용해야할까요? 정답. 상황마다 다르게 선택해야합니다. 다음은 5가지 유력한 조합과 각 조합이 효과적인 상황에 대해서 정리한 것 입니다. 

 

Provider + '?' : TOP 5

1. Provider+ChangeNotifier 

짧고. 쉬운. ChangeNotifier의 가장 큰 장점이자 단점입니다.  짧고 쉬운만큼 빠진것도 많습니다. 만약 프로젝트의 규모가 크고 복잡하다면 추가적으로 개념을 붙여야 합니다. 저 같은 경우. BaseModel, ViewModelState 등을 추가하여 Idle, Busy와 같은 State를 관리했습니다. 지금와서 생각해보면 그만큼 메리트가 있었는지,,, 그냥 BLoC 쓸걸 후회하고 있습니다. ChangeNotifier가 안좋다는 것은 아닙니다. 간단한 프로젝트나 UI만 간단히 구성하는 거라면 저는 그냥 ChangeNotifier를 사용할 것 입니다. 하지만 프로젝트의 규모가 크고 복잡하다면 개인적으로 ChangeNotifier는 적합하지않다고 생각합니다.

 

2. Provider+BLoC 

높은 신뢰성. BLoC은 2018년 부터 나왔습니다. 레퍼런스, 라이브러리, 공식 문서와 같은 것들이 가장 잘 정리되어 있습니다. 구조적으로도 굉장히 견고함을 보여줍니다. State와 Event를 분리하여 관리함으로써 다양한 상황에 유연하게 대처할 수 있습니다. 하지만 견고한만큼 코드가 길고 보일러플레이트가 많습니다. 러닝커브도 다른 패턴에 비해 꽤나 높은편입니다. 그러나 공식문서에 개념도 잘정리되어 있고 예제도 풍부하기 때문에 배우고자 하면 충분히 익힐 수 있습니다. Cubit이라는 개념을 잘 사용하면 코드도 어느정도는 감소시킬 수 있습니다. 하지만 간단한 프로젝트에 BLoC을 사용할 것 이냐고 물어보면 굳이? 라는 대답을 할 것 같습니다. 간단하다면 ChangeNotifier가 더 적합합니다. 

 

(TDD 하기 편해서 그냥 BLoC으로 하는 경우도 있습니다. BLoC의 테스트 라이브러리가 좋아서,,,, ㅎㅎ)

 

3. Provider+StateNotifier

중간. ChangeNotifier와 BLoC 사이의 어디쯤입니다. ChangeNotifier에 견고함을 더했고 BLoC에 간결함을 더했습니다. 언뜻보면 괜찮아보이지만 제가 사용해보았을때는 어중간했습니다. 작은 프로젝트에 쓰기에는 무겁고. 큰 프로젝트에 사용하자니 부족하고. 또한 2020년 들어서 나온 패키지라 약간 삐걱거리는 부분이 있습니다. 그리고 해당개념과 비슷한게 이미 BLoC에 있습니다. 바로 Cubit 입니다. Cubit은 BLoC에 간결함을 더한 버젼입니다. 그리고 StasteNotifier와 굉장히 비슷하게 동작합니다. 저라면 StateNotifier 대신에 Cubit을 사용할 것 같습니다. 하지만. 아직 나온지 얼마안되었기 때문에. 미래에 좀 더 좋은 패턴으로 성장하길 기대하고 있습니다.

 

4. Provider+Mobx

익숙함. Flutter는 React의 큰 영향을 받았습니다. 따라서 React에서 사용되는 Mobx패턴을 Flutter에서도 사용할 수 있습니다. React를 기존에 하시던 분들은. 익숙한 Mobx를 Flutter에서 그대로 사용하시면 됩니다. 익숙하신 만큼 견고하게 빠르게 앱을 구축할 수 있으실 것 입니다. 하지만. Flutter를 새로이 시작하시는 분이라면. 굳이 Mobx를 사용할 필요가 있는지에 대해서는 의문점이 생깁니다. 새로 시작하신다면. 저는 BLoC을 추천드립니다.

 

5. Provider+Redux

위의 Mobx랑 똑같습니다. React를 하시던 분들 중 Redux를 사용하시던 분들은. Redux를 사용하여 쉽게 플러터 앱을 구축하시면 됩니다. 근데. Flutter를 막 시작하시고. React에 경험이 없으시다면. 굳이 해당 패턴을 선택할 이유는 없는 것 같습니다.

 

마치면서

음.. 글을 쓰다보니. 중립을 지키지 못한 것 같습니다. 글이 BLoC 쪽으로 많이 기울었는데요 ㅎㅎ. 제 생각에는 BLoC이 그나마 다른 패턴에 비해 경쟁력을 가지고있는 것 같습니다. 러닝커브. 보일러플레이트. BLoC이 고질적으로 가지고 있었던 문제가 Provider, Cubit으로 인해 많이 해소되었기 때문인 것 같습니다. 물론 그렇다고 해서 다른 패턴이 의미가 없는 것이 아닙니다. 간단한 프로젝트라면 Provider+ChangeNotifier 가 훨씬 좋다고 생각합니다. React를 하시던 분이면 Provider+Mobx or Redux 가 더 괜찮을 수 있다고 생각합니다. 하지만 제 마음속에 1등은 BLoC인 것 같습니다. 여러분들도 여러분들 만의 1등을 찾으셨으면 합니다. 

 

긴 글 읽어주셔서 감사합니다 :)