웹 응용 프로그래밍에서 가장 중요한 역할 중에 하나는 데이터를 구성하고 그것을 페이지에 표현하는 것이다.

MVC에서는 컨트롤러가 데이터를 만들어서 뷰로 전달하는 역할을 한다.

ASP.NET MVC에서는 데이터를 전달 하기 위해 ViewBag을 이용하거나  강력한 형식의 뷰(Srongly Typed View)를 이용하는 방법이 있는데 하나씩 살펴보자.

1. ViewBag을 이용한 데이터 전달

ViewBag은 dynamic 형식을 사용하여 변수의 Type을 검사하지 않는다. 변수의 타입을 검사하지 않기 때문에 어떤 Objext도 ViewBag에 저장하여 뷰에 전달이 가능하다.

우선 코드를 보자

public class MyFirstController : Controller { // // GET: /MyFirst/ public ActionResult Index() { ViewBag.Message = "Hello World!"; MyFirstModel myFirstModel = new MyFirstModel() { Message = "Hello World!", CurrentDateTime = Convert.ToString(DateTime.Now) }; ViewBag.myFirstModel = myFirstModel; return View(); } }

[코드 1]

 namespace MvcApplication.Models { public class MyFirstModel { public string Message { get; set; } public string CurrentDateTime { get; set; } } }

[코드 2]

[코드 1]은 지난번에 작성한 MyFirstController에서 데이터를 전달하는 코드이다.

코드를 보면 ViewBag 객체에 데이터를 추가하고 있다. 단순히 뷰에 메시지만 전달 하려고 하면

[코드 1]의 8번째 줄과 같이 ViewBag에 Message라는 속성을 정의하고 데이터를 추가할 수 잇다.

다른 방법으로 뷰에 모델에서 만든 객체를 전달 하려고 한다면 [코드 2]에서 처럼 Models 폴더에 객체를 하나 생성하고  

[코드 1]의 16번째 줄처럼 ViewBag에 객체를 대입하여 전달하는 것도 가능하다.

@{ ViewBag.Title = "Index"; } <h2>Index</h2> <h2>@ViewBag.Message</h2> <h2>@ViewBag.myFirstModel.Message</h2> <h2>@ViewBag.myFirstModel.CurrentDateTime</h2> </SPAN>

[코드 3]

컨트롤러에서 ViewBag에 담았으니 뷰에서 데이터를 어떻게 사용하는지 보자.

뷰에서 ViewBag사용은 컨트롤러에서 데이터를 대입한 방법대로 ViewBag에서 정한 속성을 접근하면 된다.

데이터를 가져올때는 @를 붙이는데 이는 Razor 코드블록이다.

[코드 3]의 6번째 줄 처럼 ViewBag.Message를 접근할 수도 있고 7, 8번째 줄 처럼 생성한 모델의 속성에 접근하여 데이터를 가져올 수도 있다.

다만 dynamic 형식을 사용하기 때문에 인텔리센스는 적용되지 않는다....

[그림 1]

흐름을 정리하면 컨트롤러에서 ViewBag에 데이터를 저장하고

뷰에서는 저장한 ViewBag에 속성을 가져다 쓰게 되고 그 결과 [그림 1]과 같이 화면에 보이게 되는것이다.

2. 강력한 형식의 뷰(Strongly Typed View)

이번에는 ViewBag을 사용하지 않고 뷰에 객체를 전달하는 다른방법을 보자.

강력한 형식의 뷰는 컨트롤러에서 뷰함수를 리턴할 때 객체를 전달하고 뷰에서는 전달한 객체를 사용하는 방법이다.

역시 잘 모르겠으니 코드를 보는 것이 좋겠다....

[코드 4]

[코드 5]

우선 [코드 4]는 Controlls폴더에 MySecondController를 생성했고 [코드 5]는 Models폴더에 MySecondModel을 생성한 것이다. 컨트롤러 추가 방법은 여기를 참고하기 바란다.

ViewBag을 사용할 때에는 ViewBag에 속성을 사용하여 데이터를 전달햇는데 [코드 4]에서는 뷰함수를 리턴할때 객체를 전달하고 있다.

이제 컨트롤러에서 뷰를 추가해보도록 하자.

[그림 2]

컨트롤러의 Index함수에서 마우스 오른쪽 버튼을 클릭하여 뷰 추가항목을 선택하면 [그림 2]와 같이 뷰 추가 팝업이 나타난다.

 뷰 이름을 정하고 나서 아래부분에 강력한 형식의 뷰 만들기에 체크를 하고 모델 클래스에 Models에 생성한 MySecondModel을 선택 후 추가를 클릭한다.

이는 뷰에서 MySecondModel을 사용하겠다고 명시하는 것이다.

@model MvcApplication.Models.MySecondModel @{ ViewBag.Title = "Index"; } <h2>Index</h2> <h2>@Model.Title</h2> <h3>@Model.Message</h3>

[코드 6]

[코드 6]의 생성된 뷰에서 보면 1번째 줄에 @model MvcApplication.Models.MySecondModel이 선언되어잇다.

우리가 뷰를 추가할 때 강력한 형식의 뷰 만들기를 체크했기 때문에 뷰에서는 MySecondModel을 사용할 수 있게 된다.

모델을 사용하는 방법은 9, 10번째 코드를 보면 @Model.Title, @Model.Message와 같이 모델에서 생성한 객체의 속성에 직접 접근하여 사용한다.

여기서는 어떤 모델을 사용하겠다고 정의 했기 때문에 @Model. 이후에 인텔리센스도 적용이 된다.

[그림 3]

[그림 3]은 결과 화면이다. 모델을 전달하는 방법이 다르다고 해서 뷰에서 보이는 게 다르거나 한 것은 아니다.

각각의 방법에 대해 특징을 이해하고 상황에 맞게 사용하면 될 듯하다.

지난 시간 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]

각 컨트롤들의 접근 가능한 속성들은 모두 의존 속성(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간의 의존성을 완벽히 분리할 수 있다는 장점이 있다.