[Flutter] MVVM 아키텍처(Model-View-ViewModel)

MVVM 아키텍처

 

MVVM 아키텍처란?

• Model - View - ViewModel의 약자
• UI와 비지니스 로직을 효율적으로 분리해 구조화하는 디자인 패턴
• 유지보수성, 재사용성이 좋음.
• 역할이 분리되어 있어 테스트가 용이함.

 

MVVM 구조의 핵심 요소

Model

• 데이터와 비지니스 로직을 관리하는 레이어
• 데이터의 CRUD 작업(생성, 읽기, 수정, 삭제), 직렬화/역직렬화 로직이 이 레이어에 포함
• View와 직접적으로 연결되지 않으며, ViewModel하고만 소통
• 서버 API, 데이터베이스, 로컬 저장소 등의 데이터 소스를 다룸
  • 예 : 사용자 정보, 상품 목록 등

View

• 사용자 인터페이스(UI)를 담당
• ViewModel에서 데이터를 가져와 화면에 표시
• 사용자 입력을 ViewModel로 전달하며, Model에 직접 접근하지 않음.
• StatelessWidget과 StatefulWidget이 이 역할을 함
  • 예 : 로그인 화면, 리스트 화면, 상세 정보 화면 등

ViewModel

• UI 로직 및 비지니스 로직을 처리하고, 상태 관리를 담당 (Provider, Riverpod 라이브러리 등을 사용)
• View와 Model 사이를 중재하는 역할
• 사용자 입력을 받아 Model에 적절히 전달하며, View나 Context를 직접 참조하지 않음

 

MVVM 구조의 흐름

 

1. View -> (입력 이벤트) -> ViewModel : 사용자의 입력을 ViewModel로 전달
2. ViewModel -> (데이터 요청) -> Model : 데이터 처리를 위해 Model을 호출
3. Model -> (데이터 반환) -> ViewModel : 데이터 베이스, API와 같은 데이터 소스에서 데이터 반환
4. ViewModel -> (상태 변수 업데이트) -> View : 받은 데이터를 가공해 UI에 전달
5. View -> (상태 변화 감지) -> 화면 자동 업데이트 : 변경된 데이터를 화면에 표시

 

MVVM의 핵심 포인트

• View는 ViewModel이 어떤 데이터를 가공하는지 몰라도 됨
• ViewModel은 어떤 View가 자신이 데이터를 구독하는지 몰라도 됨
• ViewModel과 Model 간의 의존성이 강하지만, ViewModel과 View는 약한 결합을 유지함