[개발 설계] MVVM이 뭔가요?

이번에는 MVVM에 대해서 공부하며 정리하는 시간을 가지려 합니다.

❓MVVM?

MVVM은 MS사에서 프레젠테이션 모델(PM) 패턴을 수용하여 만들어 낸 모델이라고 합니다.

MVVM은 모델, 뷰, 뷰 모델 이 세기자의 구성 요소를 가지고 있는 패턴을 말합니다. MVVM 패턴을 통해 ‘애플리케이션의 논리를 UI와 명확하게 구분’하는데 도움이 된다고 합니다! 이에 따라서 UI 수정 비용을 절약할 수 있고, 단위 테스트에 용이해지며, UI 디자이너와 개발자가 함께 작업할 수 있는 환경을 만드는데 도움을 줄 수 있다고 하네요.

그렇다면 어떤 방식으로 애플리케이션의 논리를 UI와 구분짓는 것인지 알아 보도록 하겠습니다.

우선 뷰, 모델, 뷰모델이 무엇일까요?

❓뷰

뷰는 사용자가 화면에 표시되는 구조, 레이아웃 및 모양, 즉 UI를 정의한다고 합니다. HTML, CSS와 같은 것들이 뷰라고 할 수 있겠네요!

대부분 선언적으로 정의되어있고,. 대부분 도구를 사용하여 정의하게 됩니다.

❓모델

모델은 앱의 데이터를 캡슐화하는 비 시각적 클래스라고 말합니다. 모델은 일반적으로 비지니스 및 유효성 검사 논리와 함께 데이터 모델을 포함하는 앱의 도메인 모델을 나타낸다고 할 수 있습니다!

❓뷰 모델

뷰 모델은 뷰가 데이터 바인딩 될 수 있는 속성 및 명령을 구현하고 이벤트 함수를 통해 뷰에 상태 변경을 알릴 수 있는 것이라고 합니다. 쉽게 말하자면 뷰 모델은 말 그대로 ‘뷰의 모델’ 즉 ‘추상화’ 라는 것입니다

뷰와 차이점이라면, 뷰 모델은 제공하는 속성 및 명령은 UI에 제공할 기능을 정의하지만 뷰는 해당 기능을 표시하는 방법을 결정하는 것이라고 합니다.

특히나 뷰 모델에서는 I/O작업 (입출력) 작업을 수행하기 때문에 비동기 메서드를 사용하고, 이벤트를 발생시켜 뷰의 속성 변경을 비동기적으로 알립니다.

❗뷰와 뷰 모델의 연결

뷰 모델은 데이터 바인딩 기능을 사용하여 뷰에 연결할 수 있습니다. 데이터 바인딩이란 두 가지 이상의 요소간에 실시간 연결을 설정하여 변화 값이 자동적으로 전달되는 메커니즘을 의미합니다. 보통 UI개발에서 많이 사용됩니다. 이러한 방식으로 뷰와 뷰 모델은 단방향 혹은 양방향으로 연결될 수 있습니다.

MVVM에서는 이 데이터 바인딩이라는 것이 특징입니다. 쉽게 말하자면, 뷰는 보여줄 데이터를 가지고 있는 것이 아니라, 뷰 모델에서 참조할 뿐이라는 것입니다! 그래서 모델의 데이터 값이 변경된다면, 뷰 모델이 의존성으로 인해 변경될 것이고, 이를 뷰가 ‘감지’하여 뷰는 새로 업데이트 되는 것!

지금까지 알아본 바로는, 뷰는 뷰 모델에 의존하고, 뷰 모델은 모델에 의존한다는 것을 알겠어요, 그렇다면, MVC와의 차이가 없어보이는데요..? MVC와 MVVM의 차이가 뭘까요?

❗MVC와 MVVM의 차이

MVC와 MVVM의 차이점은 의존성이라고 생각됩니다. MVVM에서는 데이터 바인딩과 커맨드 패턴을 통해 뷰와 뷰 모델에 대한 의존성을 완화하였습니다.

데이터 바인딩은 위에서 잠깐 설명드렸든 뷰와 뷰 모델 사이의 데이터 동기화를 말하는데요, 데이터 흐름을 자동으로 처리함으로써 의존성을 완화하는 것이죠.

커맨드 패턴은 사용자의 요청사항을 객체로 캡슐화하여 쉽게 전달하고 실행할 수 있도록 하는 것입니다. 예를 들어 버튼을 클릭한 클릭 이벤트를 특정 커맨드로 뷰 모델에서 이를 처리하게 됩니다. 이 커맨드는 뷰와 뷰 모델 사이의 인터페이스 역할을 해주기 때문에 의존성이 완화됩니다.

이렇게 뷰와 뷰모델의 의존성을 줄일 수 있었던 덕분에, UI디자이너와 개발자 간의 개발 환경을 증진 시킬 수 있다는 것입니다!

😆결론!

이 글을 적으면서 MVVM에 대해서 이해할 수 있는 시간을 가졌습니다! 아직 데이터 바인딩이 어떠한 원리로 젹용되는지, 커맨드 패턴이 명확하게 어떤 것인지 완전히 이해하진 못했지만, MVC와의 차이를 명확히 알았고 아키텍처를 설계하는데 큰 도움이 될 것 같습니다!

 

정보 출처!

Model-View-ViewModel - .NET