[043] 플러터 (Flutter) 배우기 - MVVM 아키텍처 패턴 적용

안녕하세요~ totally 개발자입니다.

 

MVVM (Model View ViewModel)

 

이 포스팅에서는 MVVM에 대해 알아보도록 하겠습니다. 이에 앞서 아키텍처를 적용하는 이유와 목적에 대해 알아볼 필요가 있습니다. 이 아키텍처 패턴은 공통적인 문제 발생에 대해 일반적인 그리고 재사용 가능한 해결책을 의미하며 디자인 패턴과 다른 점은 디자인 패턴은 특정 유형의 문제에 초점을 두는 반면 이 아키텍처 패턴은 전반적인 문제 해결 방법이라고 봐야 합니다. MVVM은 기존의 MVC, MVP 패턴을 보완하기 위한 패턴으로, 기존의 MVC는 Model View Controller, MVP는 Model View Presenter로 구성되어 있는 반면, MVVM은 Model, View, ViewModel로 구성되어 있습니다.

 

MVC(Model View Controller)	Controller에서 사용자의 입력 -> Model 업데이트 -> View는 Model를 통해 View를 업데이트 - 단순하지만 View와 Model이 서로 의존성이 높음
MVP(Model View Presenter)	View에서 사용자의 입력 -> Presenter에서 Model 업데이트 -> Presenter를 통해 View 업데이트 - View와 Model의 의존성은 분리되어 있으나 View와 Presenter의 의존성이 높아짐
MVVM(Model View ModelView)	View에서 사용자의 입력을 ViewModel로 전달 -> ViewModel에서 Model로 데이터 요청 및 처리 -> View는 ViewModel를 Provider나 Stream 등을 통하여 구독하거나 데이터 상태 관리를 통해 View를 업데이트 - View와 Model의 의존성이 없음 - View와 ViewModel은 서로 양방향 소통이 아니므로 여러 View가 ViewModel 하나를 참조할 수 있음

 

이론은 마쳤으니 실습을 해보도록 하겠습니다. 기존의 provider 부분을 수정하여 실습을 진행합니다.

 

먼저 위처럼 View, ViewModel, Repository, DataSource, Model의 구조를 바탕으로 진행하겠습니다.

 

View	사용자에게 보여지는 영역
ViewModel	View의 상태를 관리하고 View의 비즈니스 로직을 담당
Repository	데이터 저장소라는 뜻으로 DataLayer인 DataSource에 접근
DataSource	데이터를 가져오는 영역
Model	데이터 설계

 

 

Step 1: 다음처럼 폴더와 파일을 구성해줍니다.

 

 

Step 2: Model를 작성합니다 (album.dart)

 

 

Step 3: DataSource를 작성합니다. (dataSource.dart) 원래는 localDataSource와 remoteDataSource를 나누는 것이 일반적이지만 이 예시에서는 하나로 통합하겠습니다.

 

 

 

Step 4: Repository를 작성합니다. (albumRepository.dart)

 

 

 

Step 5: ViewModel를 작성합니다. (albumViewModel.dart) notifyListeners를 통해 데이터에 업데이트가 있다는 것을 ViewModel를 참조하고 있는 View에게 알려줍니다.

 

 

 

Step 6: View를 작성합니다. (albumView.dart) 저는 Consumer를 통해 데이터를 받아오도록 했습니다.

 

 

 

Step 7: main.dart를 수정합니다. Provider를 사용하기 때문에 다음처럼 ChangeNotifierProvider로 감싸주어야 합니다. 참고로 pubspec.yaml에 이미 provider와 http는 설치되어 있어야 합니다.

 

 

Step 8: 결과는 다음과 같습니다.

 

 

[유튜브 강좌 영상]

 

https://youtu.be/R8bHEQ41NYY