[Flutter] MVVM패턴

MVVM패턴이란?

구분 설명

정의	Model–View–ViewModel 패턴은 UI(View), 로직(ViewModel), 데이터(Model)를 분리한 구조다.
구성 요소
Model	데이터 원본, API, Repository
View	사용자에게 보이는 화면 (Widget)
ViewModel	State상태 관리, Model 데이터 가공, 사용자 입력 이벤트 및 비즈니스로직 처리
흐름 구조	View → ViewModel → Model → ViewModel → View (단방향)

 

 

MVVM은 Model–View–ViewModel 구조로, 화면(UI)과 로직을 완전히 분리하는 아키텍처다.
Model은 데이터를 관리하고, ViewModel은 비즈니스 로직과 상태를 관리하며, View는 화면을 그리는 역할만 한다.
이 세 가지가 명확히 분리되어 있어서 코드 의존성이 줄고, 테스트나 유지보수가 쉬워진다.

 

 

MVVM패턴의 특징과 장점?

특징	- View와 ViewModel의 단방향 데이터 흐름 - ViewModel은 View를 직접 모름 (느슨한 결합) - 상태관리 도구(Riverpod, Provider 등)로 연결
장점	유지보수성 – UI와 로직이 분리되어 수정 용이 재사용성 – ViewModel을 여러 View에서 재활용 가능 테스트 용이성 – UI 없이 비즈니스 로직 단위 테스트 가능 코드 가독성 – 역할이 명확하여 협업에 유리

MVVM패던의 가장 큰 특징은 단방향 데이터 흐름과 역할 분리다.
View는 ViewModel의 상태만 관찰하고, ViewModel은 Model에서 데이터를 가져와 가공한다.
이렇게 하면 구조가 명확해지고, UI가 변경되어도 로직은 그대로 유지된다.
장점으로는 유지보수성과 테스트 용이성, 코드 재사용성이 높다는 점을 들 수 있다.
실제 Flutter에서는 Riverpod이나 Provider를 사용해서 이 구조를 쉽게 구현한다.

 

 

MVVM과 StatefulWidget의 차이점

StatefulWidget은 UI 안에서 상태를 직접 관리하기 때문에 코드가 단순하지만, UI와 로직이 섞이게 된다.
반면 MVVM은 상태와 로직을 ViewModel로 분리해서 View는 단순히 보여주는 역할만 한다.
그래서 StatefulWidget은 빠른 프로토타입에는 좋지만, 규모가 커지면 유지보수가 어려워지고 테스트도 힘들다.
반대로 MVVM은 구조가 명확해서 팀 개발이나 확장성이 필요한 프로젝트에 적합하다.

 

상태 관리 위치	ViewModel이 상태를 가짐	위젯 자체가 상태를 가짐 (setState)
구조	View(UI) ↔ ViewModel(로직) ↔ Model(데이터)	View와 로직이 한 클래스 안에 존재
UI 업데이트 방식	ref.watch 등으로 자동 갱신	setState()로 수동 갱신
유지보수성	높음 (역할 분리)	낮음 (UI와 로직 혼합)
테스트 용이성	로직만 단위 테스트 가능	UI와 로직이 결합되어 어려움