Flutter MVVM + Provider: 완벽 정리

1. 서론

Flutter에서 MVVM 패턴을 사용하는 이유

- UI와 Model, ViewModel을 따로 관리하기 위해

- 따로 관리함으로 의존성, 오류 가능성을 줄임, 편의성 상승

2. MVVM 패턴 개념 정리

MVVM 패턴이란?

1. View에서 이벤트 발생

2. 이벤트 ViewModel에 전달

3. ViewModel은 Model에게 이벤트에 대한 데이터 요청

4. Model이 ViewModel에 데이터 전달

5. Viwemodel이 데이터 가공 후 view에 바인딩

6. View가 ViewModel의 데이터 감지하고 UI 업데이트

MVC와 MVVM 비교 MVVM 선택의 이유

- MVC패턴은 Controller가 View와 Model을 조율, MVVM패턴은 ViewModel이 View와 Model을 연결

- 규모가 커지면 MVC의 Controller의 역할이 너무 커질 수 있음

- 따라서 각각의 의존도가 낮고 역할이 명확라게 분리된 MVVM을 선택함

- 의존도가 낮으면 UI와 로직이 바뀌어도 그 부분만 수정하면됨 (!!프로젝트가 커질수록 UI의 변경이 자주 있음, UI와 로직이 의존도가 높으면 변경할 때마다 리팩토링이 어려움!!)

- MVVM에서 View가 ViewMode을 구독하고 있어 상태관리 도구 Provider같은 도구를 활용하면 효과적인 UI업데이트 가능

MVVM 구조의 핵심 요소

• Model
• ViewModel
• View

3. Provider와 MVVM의 결합

Provider란? (간단한 개념 정리)

- 상태관리를 쉽게 도와주는 디자인 패턴

- CRUD, 변경 데이터 UI반영, 효율적인 상태 업데이트

MVVM에서 Provider가 필요한 이유

1. MVVM 패턴의 핵심 목표는 View와 ViewModel를 분리하는 것 Peovider를 사용함으로 더 명확하게 분리 가능

2. Provider 사용시 유지보수 측면에서 로직 변경할 때 View와 ViewMode의 의존도가 낮음으로 View 코드는 수정이 필요없음

3. 이 둘의 이유만으로도 MVVM패턴의 목표에 Provider가 적합하다는 걸 알 수 있음

setState() VS Provier

- 기본적으로 상태관리를 setState()를 이용함 setState()은 새로운 데이터를 UI적용시킬 때 리빌드, 불필요한 UI업데이트를 해줘야 UI가 바뀌는 치명적이 단점이 있음 (유저들은 버그인줄 알듯?..)

- setState()에 비해 Provider는 변경된 데이터를 구독하여 자동으로 감지하고 UI에 반영시켜줌 이게 Provider를 선택한 가장 큰 이유임

ChangeNotifier를 활용한 ViewModel 관리

- ChangeNotifier란 상태관리 클래스 중 하나로, 상태가 변경되었을 때 구독자에게 알려주는 클래스로 ViewModel에서 상태를 변경하면 View(UI)에 업데이트 효과적으로 할 수 있게 도와줌

- Provider는 ChangeNotifier를 구독하는 라이브러리 이 두개가 결합되면 MVVM 패턴을 더욱 간단하고 직관적으로 적용 가능

참고: https://velog.io/@yys7517/Android-Clean-Architecture-MVVM