데이터 바인딩 및 MVVMData binding and MVVM

모델-뷰-ViewModel (MVVM)은 UI 및 비 UI 코드를 분리 하는 것에 대 한 UI 아키텍처 디자인 패턴입니다.Model-View-ViewModel (MVVM) is a UI architectural design pattern for decoupling UI and non-UI code. MVVM을 사용 하 여 XAML에서 선언적으로 UI를 정의 하 고 데이터 바인딩 태그를 사용 하 여 데이터와 명령을 포함 하는 다른 계층에 연결 합니다.With MVVM, you define your UI declaratively in XAML and use data binding markup to link it to other layers containing data and commands. UI를 보관 하는 느슨한 결합을 제공 하는 데이터 바인딩 인프라 및 연결 된 데이터를 동기화 하 고 적절 한 명령에 사용자 입력을 라우팅합니다.The data binding infrastructure provides a loose coupling that keeps the UI and the linked data synchronized and routes user input to the appropriate commands.

느슨한 결합을 제공 하기 때문에 데이터 바인딩 사용 하 여 다른 종류의 코드 간의 굳은 종속성을 줄입니다.Because it provides loose coupling, the use of data binding reduces hard dependencies between different kinds of code. 따라서 쉽게 다른 단위로 의도 하지 않은 부작용을 일으키지 않고 개별 코드 단위 (메서드, 클래스, 컨트롤 등)을 변경할 수 있습니다.This makes it easier to change individual code units (methods, classes, controls, etc.) without causing unintended side effects in other units. 예는이 분리는 중요 한 부분의 분리는 다양 한 디자인 패턴에서 중요 한 개념입니다.This decoupling is an example of the separation of concerns, which is an important concept in many design patterns.

MVVM의 이점Benefits of MVVM

코드 분리 포함 하 여 여러 가지 이점이 있습니다.Decoupling your code has many benefits, including:

  • 반복, 예비 코딩 스타일을 사용 하도록 설정 합니다.Enabling an iterative, exploratory coding style. 격리 된 변경 되어 덜 위험한 쉽게 실험할 수 있습니다.Change that is isolated is less risky and easier to experiment with.
  • 간소화 된 단위 테스트 되었습니다.Simplifying unit testing. 개별적으로 및 테스팅 환경에서 서로 격리 된 코드 단위를 테스트할 수 있습니다.Code units that are isolated from one another can be tested individually and outside of production environments.
  • 팀 공동 작업을 지원합니다.Supporting team collaboration. 잘 설계 된 인터페이스를 따르는 코드를 분리 된 별도 개인 이나 팀에서 개발 하 고 나중에 통합 합니다.Decoupled code that adheres to well-designed interfaces can be developed by separate individuals or teams, and integrated later.
  • 관리 용이성을 향상 합니다.Improving maintainability. 분리 된 코드에서 버그를 해결 하는 것은 다른 코드에 회귀가 발생 가능성이 줄어들어입니다.Fixing bugs in decoupled code is less likely to cause regressions in other code.

MVVM과 달리 더 기본적인 "코드 숨김" 구조체를 사용 하 여 앱은 일반적으로 표시 전용 데이터에 대 한 바인딩 데이터를 사용 하 고 직접 컨트롤에 의해 노출 되는 이벤트를 처리 하 여 사용자 입력에 응답 합니다.In contrast with MVVM, an app with a more conventional "code-behind" structure typically uses data binding for display-only data, and responds to user input by directly handling events exposed by controls. 이벤트 처리기 코드 숨김 파일 (예: MainPage.xaml.cs)에서 구현 되 고 일반적으로 UI를 직접 조작 하는 코드가 포함 된 컨트롤을 종종 긴밀 하 게 결합 됩니다.The event handlers are implemented in code-behind files (such as MainPage.xaml.cs), and are often tightly coupled to the controls, typically containing code that manipulates the UI directly. 따라서, 이벤트 처리 코드를 업데이트 하지 않고도 컨트롤을 대체할 어렵거나 합니다.This makes it difficult or impossible to replace a control without having to update the event handling code. 이 아키텍처를 사용 하 여 코드 숨김 파일 최종적으로 복제 되 고 다른 페이지를 사용 하 여 사용할 수 있도록 수정 하는 데이터베이스 액세스 코드와 같은 UI와 직접 관련 되지 않은 코드를 자주 축적 됩니다.With this architecture, code-behind files often accumulate code that isn't directly related to the UI, such as database-access code, which ends up being duplicated and modified for use with other pages.

앱 계층App layers

MVVM 패턴을 사용 하는 경우 앱은 다음 계층으로 나뉩니다.When using the MVVM pattern, an app is divided into the following layers:

  • 합니다 모델 계층 비즈니스 데이터를 나타내는 형식을 정의 합니다.The model layer defines the types that represent your business data. 이 핵심 응용 프로그램 도메인을 모델링 하는 데 필요한 모든 포함 하 고 종종 핵심 앱 논리를 포함 합니다.This includes everything required to model the core app domain, and often includes core app logic. 이 계층 보기 및 보기 모델 계층에 완전히 독립적 이며 종종 클라우드에 부분적으로 상주 합니다.This layer is completely independent of the view and view-model layers, and often resides partially in the cloud. 완전히 구현 된 모델 계층을 들어 만들 수 있습니다 여러 다른 클라이언트 앱 이므로 원하는 경우 동일한 기본 데이터를 사용 하는 UWP 및 웹 앱 같은.Given a fully implemented model layer, you can create multiple different client apps if you so choose, such as UWP and web apps that work with the same underlying data.
  • 합니다 보기 계층 XAML 태그를 사용 하 여 UI를 정의 합니다.The view layer defines the UI using XAML markup. 데이터 바인딩 식을 포함 하는 태그 (같은 X:bind) 특정 UI 구성 요소 및 다양 한 뷰 모델 및 모델 멤버 간의 연결을 정의 하는 합니다.The markup includes data binding expressions (such as x:Bind) that define the connection between specific UI components and various view-model and model members. 코드 숨김 파일 경우에 따라 사용자 지정 하거나 UI 조작 또는 이벤트 처리기 인수에서 작업을 수행 하는 보기 모델 메서드를 호출 하기 전에 데이터를 추출 하는 데 필요한 추가 코드를 포함 하도록 뷰 계층의 일부로 사용 됩니다.Code-behind files are sometimes used as part of the view layer to contain additional code needed to customize or manipulate the UI, or to extract data from event handler arguments before calling a view-model method that performs the work.
  • 합니다 뷰 모델 계층 뷰에 대 한 데이터 바인딩 대상을 제공 합니다.The view-model layer provides data binding targets for the view. 대부분의 경우에서 뷰 모델은 모델을 직접 노출 하거나 특정 모델 멤버를 래핑하는 멤버를 제공 합니다.In many cases, the view-model exposes the model directly, or provides members that wrap specific model members. 보기-모델을 추적 하기 위한 관련 된 데이터 멤버를 정의할 수도 있습니다 UI 아니라 항목의 목록 표시 순서와 같은 모델입니다.The view-model can also define members for keeping track of data that is relevant to the UI but not to the model, such as the display order of a list of items. 뷰 모델은 데이터베이스 액세스 코드와 같은 다른 서비스와 통합 지점으로도 사용 됩니다.The view-model also serves as an integration point with other services such as database-access code. 간단한 프로젝트에 대 한 별도 모델 계층이 있지만 보기-모델 필요한 모든 데이터를 캡슐화 하는 하지 해야 할 수 있습니다.For simple projects, you might not need a separate model layer, but only a view-model that encapsulates all the data you need.

기본 및 고급 MVVMBasic and advanced MVVM

모든 디자인 패턴에서와 마찬가지로 MVVM을 구현 하는 둘 이상의 방법 이며 다양 한 기술이 MVVM의 일부로 간주 됩니다.As with any design pattern, there is more than one way to implement MVVM, and many different techniques are considered part of MVVM. 따라서 여러 다양 한 타사 MVVM 프레임 워크 UWP를 비롯 한 다양 한 XAML 기반 플랫폼을 지 원하는 있습니다.For this reason, there are several different third-party MVVM frameworks supporting the various XAML-based platforms, including UWP. 그러나 이러한 프레임 워크는 일반적으로 MVVM의 정확한 정의 다소 모호 하 분리 된 아키텍처를 구현 하는 것에 대 한 여러 서비스를 포함 합니다.However, these frameworks generally include multiple services for implementing decoupled architecture, making the exact definition of MVVM somewhat ambiguous.

정교한 MVVM 프레임 워크는 매우 유용 하지만 특히 엔터프라이즈급 프로젝트에 대 한 비용은 일반적으로 모든 특정 패턴 또는 기술을 도입 하는 데 관련 된 및 혜택은 항상 확장 및 크기에 따라 선택이 취소 프로젝트입니다.Although sophisticated MVVM frameworks can be very useful, especially for enterprise-scale projects, there is typically a cost associated with adopting any particular pattern or technique, and the benefits are not always clear, depending on the scale and size of your project. 다행 스럽게도 명확 하 고 실질적인 혜택을 제공 하는 기술만을 채택 하 고 필요할 때까지 다른 사용자가 무시할 수 있습니다.Fortunately, you can adopt only those techniques that provide a clear and tangible benefit, and ignore others until you need them.

특히 많은 이해 하 고 데이터 바인딩 및 앞에서 설명한 레이어로 앱 논리를 분리 하의 모든 기능을 적용 하면 혜택을 얻을 수 있습니다.In particular, you can get a lot of benefit simply by understanding and applying the full power of data binding and separating your app logic into the layers described earlier. 모든 외부 프레임 워크를 사용 하지 않고 Windows SDK에서 제공 된 기능만 사용 하 여 수행할 수 있습니다.This can be achieved using only the capabilities provided by the Windows SDK, and without using any external frameworks. 특히 합니다 {X:bind} 태그 확장 쉽고 이전 필요한 상용구 코드를 많이 필요 하지 않게 이전 XAML 플랫폼에서 보다 성능이 뛰어난 데이터 바인딩을 만듭니다.In particular, the {x:Bind} markup extension makes data binding easier and higher performing than in previous XAML platforms, eliminating the need for a lot of the boilerplate code required earlier.

Basic, 기본 제공 MVVM을 사용 하 여 추가 지침을 확인 합니다 고객 주문 데이터베이스 샘플 GitHub에서.For additional guidance on using basic, out-of-the-box MVVM, check out the Customers Orders Database sample on GitHub. 다른 많은 UWP 앱 샘플 도 기본 MVVM 아키텍처를 사용 하며 트래픽을 앱 샘플 코드 숨김 및 MVVM 버전 모두에 대 한 설명을 포함는 MVVM 변환 .Many of the other UWP app samples also use a basic MVVM architecture, and the Traffic App sample includes both code-behind and MVVM versions, with notes describing the MVVM conversion.

참고 항목See also

항목Topics

데이터 바인딩 심층 분석Data binding in depth
{X:bind} 태그 확장{x:Bind} markup extension

샘플Samples

고객 주문 데이터베이스 샘플Customers Orders Database sample
VanArsdel 인벤토리 샘플VanArsdel Inventory sample
트래픽 앱 샘플Traffic App sample