MVVM 패턴(면접을 위한 CS 전공지식 노트)

MVVM 패턴

MVVM 패턴

MVVM 패턴은 소프트웨어 개발에서 사용되는 디자인 패턴 중 하나로, 애플리케이션의 사용자 

인터페이스(UI)와 비즈니스 로직을 분리하여 관리하고, 

코드의 가독성과 유지보수성을 향상하는데 도움을 주는 패턴입니다.

MVVM은 Model-View-ViewModel의 약자로, 세 가지 주요 구성요소로 구성됩니다.

 

MVVM패턴 구성요소

Model:
모델은 애플리케이션의 데이터와 비즈니스 로직을 포함하는 부분입니다. 

데이터베이스에서 가져온 정보, 웹 서비스와의 통신 결과물 등이 모델에 해당합니다. 

모델은 UI나 뷰와 독립적으로 존재하며, 데이터의 변경을 통지하여 뷰나 뷰모델에 변화를 전달합니다.

View:
뷰는 사용자 인터페이스를 나타냅니다. 

이 부분은 사용자가 실제로 보고 상호작용하는 부분으로, UI 요소들이나 레이아웃 등을 포함합니다. 

뷰는 주로 화면에 데이터를 표시하고 사용자 입력을 처리하는 역할을 수행합니다.

ViewModel:
뷰모델은 뷰와 모델 사이의 중간 매개체 역할을 합니다. 

뷰모델은 뷰에 표시되는 데이터와 뷰의 동작을 처리하는 로직을 포함합니다. 

뷰모델은 뷰에 특화된 데이터를 제공하고, 사용자 입력을 처리하여 모델의 데이터를 업데이트하거나 

데이터 변경을 감지하여 뷰에 반영합니다.

MVVM 패턴의 핵심 아이디어는 뷰와 모델 사이에 양방향 바인딩(Binding)을 통해 데이터의 변경이 

자동으로 반영되게 함으로써, UI와 데이터 간의 일관성을 유지하고 복잡한 데이터 관리를 

단순화하는 것입니다. 

또한, 각 구성 요소가 독립적으로 테스트 가능하며, 코드 재사용성을 높이는 장점도 있습니다.

 

MVVM패턴 장점

분리된 역할: 

MVVM은 UI 로직, 비즈니스 로직 및 데이터 모델을 분리함으로써 코드의 가독성과 유지보수성을 

향상합니다. 

각 부분이 독립적으로 관리되므로 코드 베이스가 더 깔끔하고 모듈화 되며, 변경이 필요한 부분만 

수정할 수 있습니다.

테스트 용이성: 

각 구성 요소가 분리되어 있기 때문에 단위 테스트 및 자동화된 테스트를 수행하기가 쉽습니다. 

뷰모델은 비즈니스 로직을 가지며, 이를 분리해서 테스트할 수 있어 애플리케이션의 안정성을 향상합니다.

데이터 바인딩: 

MVVM은 양방향 데이터 바인딩을 통해 뷰와 뷰모델 간의 데이터 동기화를 자동화합니다. 

데이터 변경이 자동으로 UI에 반영되므로 반복적인 작업을 줄이고 개발 생산성을 높일 수 있습니다.

재사용성: 

뷰모델은 UI와 무관하게 로직을 포함하므로, 여러 개의 뷰에서 같은 뷰모델을 사용하여 코드를 

재사용할 수 있습니다.

유연성: 

뷰와 모델 사이에 뷰모델을 두는 것으로, 뷰와 모델 간의 결합도를 줄이고 유연성을 높일 수 있습니다. 

뷰와 모델을 독립적으로 수정하거나 교체할 수 있습니다.

 

MVVM패턴 단점

복잡성: 

MVVM은 보다 복잡한 아키텍처로, 초기 설정 및 학습 곡선이 다소 높을 수 있습니다. 

특히 작은 규모의 프로젝트에서는 오버 엔지니어링일 수 있습니다.

파일과 코드 양 증가: 

각 구성 요소가 별도의 클래스로 분리되기 때문에 파일과 코드의 양이 증가할 수 있습니다. 

이로 인해 프로젝트 구조가 복잡해질 수 있습니다.

설계의 어려움: 

올바른 뷰모델 설계가 필요하며, 어떤 로직을 뷰에 두고 어떤 로직을 뷰모델에 둘지 결정하는 것이 

어려울 수 있습니다.

뷰와 뷰모델 간 의존성: 

뷰와 뷰모델 사이에 의존성이 존재할 수 있으며, 이로 인해 뷰모델의 재사용성이 제한될 수 있습니다.

오버헤드: 

간단한 애플리케이션에 MVVM 패턴을 도입할 경우, 추가적인 오버헤드가 발생할 수 있습니다. 

따라서 프로젝트의 규모와 복잡성을 고려하여 패턴을 선택해야 합니다.

MVVM 패턴은 애플리케이션의 크기, 복잡성 및 개발 팀의 요구에 따라 적절하게 적용되어야 합니다. 

중요한 것은 해당 패턴을 효과적으로 사용하기 위해 장단점을 이해하고, 

프로젝트 요구 사항에 맞게 조절하고 사용하는 것입니다.

 

MVVM패턴 자세히 알기!!

Model: 

모델은 애플리케이션의 데이터와 비즈니스 로직을 담당합니다.

예를 들어, 학교 출석 애플리케이션의 경우, 학생 정보나 출석 데이터가 여기에 해당합니다.

모델은 UI와 독립적으로 존재하며, 데이터의 변화를 감지하여 뷰나 뷰모델에 변경 사항을 전달합니다.

View: 

뷰는 사용자 인터페이스를 나타냅니다. 

이 부분은 사용자가 보는 화면을 구성하는 역할을 합니다. 

학교 출석 애플리케이션의 경우, 학생들의 출석 여부를 보여주는 화면이 뷰에 해당합니다. 

뷰는 주로 화면의 구성 요소와 레이아웃을 정의하며, 뷰모델로부터 데이터를 가져와 표시합니다.

ViewModel: 

뷰모델은 뷰와 모델 사이에서 중개자 역할을 합니다. 

뷰모델은 뷰에 표시할 데이터와 뷰의 동작을 처리하는 로직을 담당합니다. 

학교 출석 애플리케이션에서는 뷰모델이 학생들의 출석 여부 데이터를 가지고 있으며, 

출석 체크와 같은 동작을 처리합니다. 

뷰모델은 뷰와 모델 사이에서 데이터 바인딩을 통해 데이터의 변화를 자동으로 반영하므로, 

사용자의 입력이나 데이터 변경에 따른 뷰 업데이트가 원활하게 이루어집니다.

이렇게 MVVM 패턴은 데이터와 UI를 분리하여 관리하고, 각 요소가 독립적으로 테스트 가능하며 재사용성이 높아지는 장점을 가지고 있습니다. 

데이터의 변화를 자동으로 감지하여 UI에 반영되므로 코드의 일관성을 유지하고 유지보수성을 

향상시키는 데 도움이 됩니다.


*바쁜 사람을 위한 깜찍한 정리

MVVM패턴은 소프트웨어 개발에서 사용하는 디자인 패턴 중 하나로, UI와 비즈니스 로직을 분리하여 관리하는 목적으로 사용된다. 주로 프런트엔드에서 많이 사용되며 View.js 등 에서 많이 사용된다. MVVM패턴은 다른 디자인 패턴이랑 비슷하게 각각 역할을 나뉘는데 모델은 정보나 데이터들이 담기고 뷰는 UI 인터페이스를 나타내며 뷰모델은 뷰와 모델 사이에서 중개자 역할을 합니다. 예제로는 슈퍼마켓 실제 물건들 품목들 정보나 가격표 등등 데이터들이 모델에 속하며 뷰는 소비자들이 보는 품목들이 해당되고 뷰모델은 해당 품목이 어느 가격인지 나타내야 하니 서로 이어주는 역할을 하는 걸로 이해하면 쉬울 거 같다.