[Flutter] Model · View · ViewModel 구조 완벽 가이드
📖 MVVM 패턴이란
🌿 MVVM 패턴
Model-View-ViewModel의 약자로 사용자 인터페이스(UI) 개발을 위한 소프트웨어 아키텍처 디자인 패턴이다.- 이 패턴의 핵심 목적은
UI 코드와 비즈니스 로직을 명확하게 분리해서 코드의 유지보수성과 테스트 가능성을 높이는 것이다.
🗂️ Model (모델)
- 실제 데이터와 관련된 부분을 담당한다.
- API 통신, 데이터베이스 접근, 로컬 저장소 관리 등 비즈니스 로직이 포함된 핵심 영역이다.
View 나 ViewModel에 의존하지 않으며 앱이 필요한 데이터를 가져오거나 저장하는 역할을 한다.UI와 완전히 독립적으로 동작하고 화면에 어떻게 표시되는지는 전혀 모른다.
🖼️ View (뷰)
- 사용자가 직접 보는 화면(
UI) 부분이다.
- 버튼, 이미지, 텍스트 같은
UI 요소가 여기에 포함된다.
ViewModel에 있는 데이터를 데이터 바인딩을 통해 받아와 화면에 표시하는 역할만 한다.- 복잡한 로직은 포함하지 않으며
Model을 직접 참조하지 않고 오직 ViewModel과만 상호작용한다.
⚙️ ViewModel (뷰모델)
View와 Model 사이의 중간 다리 역할을 한다.Model로부터 데이터를 가져와 View에 표시하기 적합한 형태로 가공하고 사용자의 입력을 받아 Model을 업데이트하는 명령을 처리한다.- 즉 화면에 어떤 데이터를 보여줄지 결정하는 곳이다.
💎 MVVM의 장점
UI 코드와 로직이 분리되어 유지보수가 쉽다.ViewModel만 따로 테스트하기 쉽다.- 코드 구조가 명확하고 협업에 유리하다.
- 재사용성과 확장성이 높다.
👉 MVVM은 View와 Model을 분리하고 ViewModel이 그 둘을 연결하는 다리 역할을 하는 아키텍처 패턴이다.
