MVC, MVVM 코드 리뷰를 통한 차이점 설명

지난 시간 MVC, MVP, MVVM 차이점에 간략하게 차이점을 이론으로 설명하였다.

이해를 돕기 위하여 이번 시간에는 MVC, MVVM 코드 리뷰를 통하여 좀 더 이해하기 쉽도록 차이점을 설명하도록 하겠다.

먼저 MVVM 패턴의 예제를 보자. WPF를 이용한 예제이기 때문에 C#을 바탕으로 구현하였다.

필자는 GalaSoft 사에서 제공하는 MVVMLight Toolkit(라이브러리)를 이용하여 간략하게 구현해 보았다.

일단 프로젝트의 탐색기에서 나타나는 View와 Model, ViewModel 영역을 확인할 수 있다.

Model

먼저 색의 정보가 문자열 형태로 들어가는 간략한 cs 파일을 만들어 보았다.

[Brushes.cs]

namespace MvvmLight.Model { public class Brushes { private string brushName; public string BrushName { get { return brushName; } set { brushName = value; } } } }

MVVM Light Toolkit을 사용하여 프로젝트를 생성하면 자동으로 IDataService 인터페이스와 DataService의 클래스가 자동으로 생성되고 보통 이를 이용하여 Model을 변경해주게 되는데

DataService와 IDataService의 활용은 추후 따로 자세하게 설명하도록 하겠다.

[DataServcie.cs]

namespace MvvmLight.Model { public class DataService : IDataService { public void SetBrushes(string brush) { Brushes brushes = new Brushes(); brushes.BrushName = brush; } } }

[IDataService.cs]

namespace MvvmLight.Model { public interface IDataService { void SetBrushes(string brush); } }

View

버튼을 이용하여 색이 변경되는 간단한 View를 작성하였다.

[MainWindow.xaml]

<Window x:Class="MvvmLight.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

        xmlns:ignore="http://www.ignore.com"

        mc:Ignorable="d ignore"

        Height="300"

        Width="300"

        Title="MVVM Light Application"

        DataContext="{Binding Main, Source={StaticResource Locator}}">

    

    <Window.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Skins/MainSkin.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Window.Resources>

    <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Text="오늘은 간단한 바인딩 예제를 만들었습니다."/>

        <TextBlock Grid.Row="1" Height="20" Background="{Binding ColorBrush}"/>

        <Button Grid.Row="2" Content="버튼입니다. 눌러보세요." Command="{Binding ButtonCommand}"/>

    </Grid>

</Window>

각 컨트롤들의 접근 가능한 속성들은 모두 의존 속성(Dependency Property)로 이루어져 있다는 것을 명심하도록하자. 의존 속성에 대해서는 다음시간에 추후 설명하도록 하겠다.

지금은 이해를 돕기위해 의존 속성으로 되어 있기 때문에 바인딩을 걸 수 있다고 이해하고 역으로 의존 속성으로 되어있지 않으면 바인딩을 걸어 줄수 없다는 정도록 이해하면 되겠다.

[MainWindow.xaml.cs]  - 비하인드 코드

namespace MvvmLight { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { /// <summary> /// Initializes a new instance of the MainWindow class. /// </summary> public MainWindow() { InitializeComponent(); Closing += (s, e) => ViewModelLocator.Cleanup(); this.DataContext = new RedCommandViewModel(); } } }

비하인드 코드를 보면 지금은 현재 RedCommandViewModel을 DataContext로 대입해줬으므로 현재 View는 VM으로 RedCommandViewModel을 갖고 있다고 생각하면 되겠다.

만약 다른 ViewModel을 연결해주고 싶다면 DataContext에 다른 ViewModel을 대입해 주면 된다.

ViewModel

[RedCommandViewModel.cs]

namespace MvvmLight.ViewModel { class RedCommandViewModel : ViewModelBase { #region Fields private IDataService dataservice = new DataService(); private SolidColorBrush colorBrush; #endregion #region Properties public SolidColorBrush ColorBrush { get { return colorBrush; } set { colorBrush = value; RaisePropertyChanged("ColorBrush"); } } #endregion #region Commands public ICommand ButtonCommand { get { return new RelayCommand(() => { ColorBrush = new SolidColorBrush(Colors.Red); dataservice.SetBrushes("빨강"); }); } } #endregion } }

[BlueCommandViewModel.cs]

namespace MvvmLight.ViewModel { class BlueCommandViewModel : ViewModelBase { #region Fields private SolidColorBrush colorBrush; private IDataService dataservice = new DataService(); #endregion #region Properties public SolidColorBrush ColorBrush { get { return colorBrush; } set { colorBrush = value; RaisePropertyChanged("ColorBrush"); } } #endregion public BlueCommandViewModel() { ColorBrush = new SolidColorBrush(Colors.Black); } #region Commands public ICommand ButtonCommand { get { return new RelayCommand(() => { ColorBrush = new SolidColorBrush(Colors.Blue); dataservice.SetBrushes("빨강"); }); } } #endregion } }

먼저 위의 MainWindow.xmal.cs  비하인드코드에 DataContext를 RedCommandViewModel을 대입해 연결해준 결과를 보자.

위와 같이 버튼을 눌렀을 때 중간영역이 빨간색으로 변한 것을 볼 수 있다. 코드상으로 보았을때 DataService로 인하여 Model의 SolidBrush타입의 brushName도 "빨강"으로 변경된다.

다음은 DataContext에 BlueCommnadViewModel 에 연결시켜 주고 버튼을 눌렀을 때 결과다.

위와 같이 파란색으로 변한 것을 볼 수 있다. Model의 brushName도 "파랑" 변경 되었을 것이다.

따라서 View는 Model을 모른채 하나의 코드로 어떤 ViewModel을 연결시켜주냐에 따라 Command 로직 처리가 달라지고

그 로직에따라 Model도 다르게 변경되며 View도 다르게 업데이트 되어지는 것을 확인할 수있다.

Binding과 Command는 WPF의 MVVM 패턴에 있어서 가장 강력한 기능이라고 이전에 설명하였다.

Command는 해당 이벤트에 대한 명령이라고 쉽게 생각하고, 버튼이 눌렸을때, 마우스가 클릭되거나 오버됐을 때 등.. 여러 이벤트에 적용시킬 수 있다.

위의 예제는 Command를 통하여 버튼이 눌렸을때 해당 로직을 처리하고 Binding을 통하여 VIew에 업데이트를 자동으로 시켜 주는것을 보여 줌으로써 

MVVM패턴이 코드의 재사용성이 향상되고 View와 Model간의 의존성을 완벽히 분리할 수 있다는 장점이 있다.