Flutter의 MVVM 패턴

MVVM 이란?

Model + View + ViewModel 의 약자로써, 계층을 나누어 개발하는 패턴을 의미한다.

 

Model

: 데이터를 서버 등에서 가지고 오는 계층, 데이터 클래스 그 자체도 포함한다.

: Model은 U와 독립적이며, ViewModel을 통해 데이터를 제공한다. 

View

: 화면을 구현하는 계층으로써 UI 구성 요소이다. 

: 사용자가 상호작용하는 화면 부분으로, ViewModel로부터 데이터를 받아 UI를 렌더링한다.

: 사용자의 입력 이벤트를 ViewModel로 전달한다.

ViewModel

: View와 Model 간의 중간 역할을 한다.

: Model계층(Repository)에서 데이터(Model 클래스)를 가지고 와서 가공하는 계층이다.

: View에서 발생한 이벤트를 처리하고, 필요 시 Model에 데이터를 전달한다.

 

MVVM의 장점

1. 코드의 분리 : UI와 비즈니스 로직이 분리되어 유지보수가 쉬움.

2. 테스트 용이성 : ViewModel과 Model을 독립적으로 테스트 가능.

3. 재사용 가능 : ViewModel은 여러 View에서 재사용 가능.

 

MVVM 동작 원리

• 사용자가 액션 발생 (View)
  → 버튼 클릭, 텍스트 입력 등 이벤트가 View에서 발생.
• View에서 이벤트를 ViewModel로 전달
  → ViewModel이 비즈니스 로직을 처리.
• ViewModel이 Model과 상호작용
  → 데이터를 조회하거나 수정.
• Model에서 처리 결과 반환
  → ViewModel이 필요한 데이터를 준비.
• ViewModel이 상태 변경을 알림
  → notifyListeners(), Stream, 상태 변경 이벤트로 View에 알림.
• View가 UI를 업데이트
  → ViewModel에서 받은 데이터로 UI를 다시 렌더링.