인트로
mvvm을 검색하면 나오는 이미지. 3가지 분류로 되어있다
개념은 어렵지 않고 간단한데, 여러 개발자들이 협업간에 의사소통과 코드 구조화를 효율적으로 하기 위해 등장하게 된 패턴들 중 하나이다.
구조화 없이 한 파일에 모든 코드들이 있다고 상상하면...;
+ C#의 경우
C# WPF에서 MVVM 패턴 (출처: 재과장)
- View : UI 레이아웃을 구성 (.xaml)
- ViewModel : 클릭과 같은 동작과 관련된 기능을 구성 (.cs)
- Model : 데이터를 정의하거나 DB에서 가져오는 기능을 구성 (.cs)
XAML은 이렇게 생겼다. Flutter에서 레이아웃 구성할때와 비슷한 듯.
추가로 찾아보니 Delphi에도 MVVM 패턴이 있다고 함. MVVM은 어떤 특정 언어나 시스템을 위한 것이 아니라 Windows, Linux, Android, iOS 등 앱 프로그램으로 개발하는 곳이라면 MVVM 패턴이 따라다니는 것 같다. (근본있음)
Flutter
1. View
여러 위젯들을 사용해서 UI를 구성한다. 레이아웃만 구성하는 위젯들이 있고(Containter, Row, Column 등) Icon이나 Text처럼 어떤 데이터나 이미지를 넣는 위젯이 있다.
2. ViewModel
View에 데이터를 출력해주고 싶은데 View 레이어에서 직접 데이터를 가져오면 관리하기가 용이하지 않다. 그래서 ViewModel Layer에서 데이터나 상태를 관리하고 비즈니스 로직(회원 id 중복 검사와 같은 기능들) 을 처리 한다.
3. Model
로컬 DB나 외부 API에서 받아온 데이터를 관리하고 데이터의 형태를 정의한다
4. 흐름
- View에서 사용자가 뉴스 정보를 불러오는 버튼을 눌렀다
- View는 요청을 ViewModel로 보낸다.
- ViewModel은 Model에 데이터를 요청하고 처리하고 저장한다.
- View는 ViewModel의 데이터를 통해 화면을 업데이트한다.
- View는 여러개가 되고 ViewModel은 하나가 되는 구조가 가능하다.
정리
코드의 분리로 프로젝트 개발 시 협업과 소통이 용이해져 결국 개발 속도에 영향을 미친다.
참고문서
flutter.sh / Flutter Developer RoadMap
[디자인패턴] SOLID 원칙
[C# WPF] MVVM 간단하게 시작하기 - 1 (데이터바인딩, 연동)
[ 디자인 패턴 - 4부 ] 플러터에서 mvvm 패턴 응용 - feat. Getx
Flutter 앱 개발을 위한 MVVM아키텍처 - 1부 MVVM이란?
Android MVVM 아키텍처의 등장 배경과 필요성
MVC
