MVVM 패턴

📖 MVVM 패턴이란?

MVVM (Model-View-ViewModel) 디자인 패턴은 소프트웨어 개발에서 애플리케이션 구성 요소를 Model, View, ViewModel 세 부분으로 분리하는 아키텍처 패턴입니다. 이 패턴의 목적은 코드의 가독성과 재사용성을 높이며, 각 구성 요소의 책임을 명확하게 나눠 유지 보수를 용이하게 하는 것입니다.
 

1. Model

MVVM 디자인 패턴에서 Model은 애플리케이션의 데이터 처리와 비즈니스 로직을 담당하는 구성 요소입니다.

• 데이터 처리: Model은 애플리케이션에서 사용되는 데이터와 관련된 모든 작업을 처리합니다. 이는 객체와 데이터 구조의 선언, 데이터베이스와의 통신, API 호출 등을 포함합니다.
• 비즈니스 로직: Model은 애플리케이션에서 수행되어야 하는 비즈니스 규칙과 작업을 처리합니다. 이는 입력 검증, 데이터 변환, 계산, 분류, 정렬 등의 작업을 수행합니다.
• 데이터 저장 및 검색: Model은 데이터 저장소와 상호작용하여 데이터를 저장하고 검색합니다. 이는 대개 데이터베이스, 파일 시스템, 웹 서비스 등 외부 소스와의 통신을 의미합니다.
• 상태 관리: Model은 애플리케이션의 상태를 관리하고 필요에 따라 변경을 추적합니다. 상태 관리는 사용자 세션, 캐싱, 영속성 등을 포함할 수 있습니다.
•  예외 처리: Model은 데이터 처리 및 비즈니스 로직 관련 에러를 처리하며 예외 상황을 관리합니다. 이를 통해 ViewModel과 View로부터 에러 처리 관련된 코드를 분리할 수 있습니다. Model은 애플리케이션의 핵심 로직과 데이터 관리를 수행하므로 복잡성이 높을 수 있습니다. MVVM에서는 Model을 가능한 한 단순하게 유지하고 비즈니스 로직을 적절한 수준으로 분리하는 것이 좋습니다. 이렇게 하면 코드 유지 보수 및 테스트가 더 용이해집니다.

MVVM 디자인 패턴에서 Model은 ViewModel에 의해 사용되며, ViewModel은 Model과 관련된 데이터를 View에 적합한 형식으로 변환하고 업데이트합니다. 이를 통해 애플리케이션 구성 요소 간의 관심사를 분리하고, 구조를 보다 명확하고 모듈식으로 만들 수 있습니다.

2. View

MVVM 디자인 패턴에서 View는 사용자 인터페이스와 관련된 구성 요소로, 사용자와 애플리케이션 간의 상호작용을 지원합니다.

• 사용자 인터페이스: View는 애플리케이션에서 사용자 인터페이스(UI)를 구현합니다. 이 과정에서 화면 레이아웃, 요소 배치, 색상, 폰트 및 스타일 등에 관한 결정을 내립니다.
• 사용자 입력: View는 사용자의 입력을 받아 처리하거나 ViewModel에 전달합니다. 이에는 키보드 입력, 마우스 클릭, 터치 이벤트 등 다양한 종류의 입력이 포함됩니다.
• 데이터 바인딩: View는 ViewModel과 데이터 바인딩을 통해 정보를 공유하고 화면에 표시되는 데이터의 동기화를 유지합니다. 또한, 값을 변경하거나 사용자 액션을 처리할 때 ViewModel의 속성이나 메서드를 호출해 적절한 로직이 수행되도록 합니다.
• 사용자 피드백: View는 사용자에게 피드백을 제공합니다. 이는 직접적인 응답(예: 버튼 클릭 애니메이션)이나 간접적인 피드백(예: 로딩 인디케이터, 메시지 표시 등)을 포함합니다.
• 상태 변경: View는 애플리케이션의 사용자 인터페이스 상태에 따라 동적으로 변경이 가능해야 합니다. 예를 들어, 다른 UI 구성 요소나 애니메이션 등을 표시하거나 숨기는 등의 기능을 수행합니다.
• 접근성: View는 사용자의 다양한 요구에 맞게 접근성을 구현해야 합니다. 이는 스크린 리더 지원, 키보드 조작 및 사용성 향상을 고려한 적절한 기능을 제공하는 것을 포함합니다.

MVVM 패턴에서 View는 가능한 한 비즈니스 로직과 결리 되어야 하며, ViewModel과의 통신을 통해 동작을 처리합니다. 이렇게 함으로써 UI 코드와 비즈니스 로직이 서로 간섭하지 않아 코드 유지 보수 및 디자인 요소의 수정이 훨씬 쉽습니다. 이러한 구조는 애플리케이션의 확장성과 테스트 용이성에 장점을 가져옵니다.

3. ViewModel

MVVM 디자인 패턴에서 ViewModel은 Model과 View 사이의 연결 역할을 하는 중요한 구성 요소입니다.

• 데이터 준비: ViewModel은 Model에서 제공하는 데이터를 View에 표시하기에 적합한 형태로 가공합니다. 이 과정에는 단위 변환, 포맷팅, 데이터 소팅 등이 포함될 수 있습니다.
• 데이터 바인딩: ViewModel은 View와 데이터 바인딩을 통해 정보를 공유하며, View에 표시되는 데이터의 자동 갱신을 처리합니다. 이를 통해 View의 상태와 데이터 일관성이 유지됩니다.
• 명령 처리: ViewModel은 사용자의 입력이나 액션을 처리하고 적절한 비즈니스 로직으로 전달합니다. 이를 명령 패턴(Command Pattern)을 사용하여 구현할 수 있으며, 사용자 인터페이스와 관련된 이벤트 처리를 ViewModel에서 수행합니다.
• 의존성 관리: ViewModel은 View에 대한 직접적인 참조를 가지지 않습니다. 이로 인해 View와 ViewModel 사이의 느슨한 결합(loose coupling)을 유지하며, 코드의 유연성과 재사용성이 향상됩니다.
• 테스트 용이성: ViewModel은 View와 독립적이므로 로직 테스트가 더 쉽습니다. 이로 인해 높은 코드 품질과 신뢰성을 달성할 수 있습니다.
• 명확한 책임 분리: ViewModel의 도입으로 Model, ViewModel 및 View 간 책임의 명확한 분리가 가능해져 가독성이 높은 코드를 작성할 수 있습니다. 이렇게 함으로써 애플리케이션 아키텍처의 구조화와 모듈화가 더욱 강화됩니다.

ViewModel은 MVVM 패턴에서 핵심적인 역할을 수행하며, 각 구성 요소 간의 관심사를 분리하고 코드의 가독성 및 유지보수성을 높이는데 기여합니다. ViewModel을 사용하면 사용자 인터페이스와 비즈니스 로직 간의 명확한 경계가 생겨 애플리케이션 개발과 유지보수가 효과적으로 이루어집니다.

4. MVVM의 장점

• 유지 보수 및 확장성: MVVM 패턴은 모델, 뷰, 뷰 모델을 분리하는 구조를 제공하므로 코드의 유지 보수 및 확장성이 향상됩니다. 새로운 기능 추가나 UI 개선, 코드 변경 등이 필요한 경우, 이러한 작업을 직접 모델이나 뷰에 수행하는 것이 아니라 뷰 모델에서 담당하므로 데이터, 비즈니스 로직, UI 간의 경계가 명확해져 유연하고 쉬운 개발이 가능해집니다.
• 유지 보수성 및 테스트 용이성: MVVM 패턴은 각 기능이 분리되어 있으므로, 이로 인해 개발자는 모든 클래스를 더욱 잘 이해하고 변경할 수 있습니다. 이러한 분리는 단위 테스트에도 큰 도움을 줍니다.
• 데이터 바인딩: MVVM 패턴은 데이터 바인딩을 사용하여 뷰 모델과 뷰를 연결하는 강력한 기능을 제공합니다. 이로 인해 개발자는 비즈니스 로직과 UI 업데이트를 분리하고 방식과 패턴을 관리할 수 있습니다.
• UI와 데이터 분리: MVVM 패턴에서 개발자는 UI를 작성하는 일과 데이터를 처리하고 저장하는 일을 분리할 수 있습니다. 이로 인해 코드의 재사용성이 증가하며, 동일한 데이터에 대한 여러 UI를 만들 수 있게 됩니다.
• 코드의 간결성: MVVM 패턴은 UI와 코딩 사이의 중간 계층인 뷰 모델을 사용하므로 코드의 간결성을 높일 수 있습니다. 이는 작성해야 하는 코드량을 줄일 뿐 아니라 코드 퀄리티 또한 높일 수 있는 장점을 가집니다.

5. MVVM의 단점

• 복잡한 바인딩: 데이터 바인딩은 MVVM에서 사용자 인터페이스 업데이트를 단순화하지만, 때로는 복잡한 바인딩 시나리오도 발생합니다. 이는 코드의 가독성을 떨어뜨려 디버깅이 어렵게 만들 수 있습니다.
• 과도한 추상화: MVVM은 코드를 캡슐화함으로써 코드 관리 및 확장성이 향상되지만, 이로 인해 객체 간 상호작용이 복잡해지고 클래스 간 관계가 더 불명확해질 수 있습니다. 이를 과 추상화라고 부르며, 이는 코드의 가독성 및 유지 보수에 부정적인 영향을 미칠 수 있습니다.
• 성능 저하: 데이터 바인딩이나 제어 기능 사용에 따라 성능 저하가 발생할 수 있습니다. 비록 이러한 저하가 대부분의 경우에 큰 문제가 되지 않지만 실시간 데이터 처리와 같은 높은 성능이 요구되는 애플리케션에서는 주의해야 할 사항입니다.

6. MVC 패턴과의 차이

 

• MVC 패턴에서는 Controller가 Model과 View 사이에서 데이터와 명령을 주고 받으며 업데이트를 관리합니다. Controller가 View로부터 이벤트를 받아 적절한 Model에 전달하고, 결과를 다시 View에게 전달합니다. 이 과정에서 View Model 간의 직접적인 의존성은 상대적으로 낮으나, 여전히 Controller를 통해 서로 상호작용하게 됩니다.
• MVVM 패턴에서는 ViewModel이 중심이 되어 View와 Model 사이의 관계 관리하며, 데이터 바인딩을 사용해 View와 자동으로 동기화됩니다. ViewModel은 View에 대한 정보를 가지지 않기 때문에 View와의 의존성이 낮으며, 직접적으로 View를 업데이트하지 않습니다. 이러한 구조로 인해 View와 Model 사이의 의성이 더욱 낮아지게 됩니다.