Windows Presentation Foundation (WPF)은 .NET 프레임워크를 기반으로 하는 UI 개발 플랫폼으로, 사용자 인터페이스(UI)를 제작하고 데이터 바인딩 및 스타일링을 통해 우아한 디자인을 구현할 수 있습니다. 오늘은 MVVM(Model-View-ViewModel) 디자인 패턴을 활용하여 간단한 제품 목록 및 세부 정보를 표시하는 애플리케이션을 개발해 보겠습니다.
1. MVVM 아키텍처 이해하기
MVVM 패턴은 애플리케이션의 구조를 세 가지 주요 구성 요소로 나누어 유지 보수성을 높입니다.
- Model: 애플리케이션의 데이터 구조와 비즈니스 로직을 담당합니다. 데이터베이스로부터 데이터를 가져오거나, 데이터를 처리하는 기능을 포함합니다.
- View: 사용자에게 표시되는 UI 구성 요소를 포함하며, 보통 XAML 파일로 작성됩니다.
- ViewModel: Model과 View 간의 중재 역할을 하며, View에서 사용자와 상호작용할 수 있도록 데이터를 가공하여 제공합니다.
2. 예제 프로젝트 설정하기
Visual Studio를 열고 새로운 WPF 애플리케이션 프로젝트를 생성합니다. 프로젝트의 이름을 ProductDisplayApp이라고 지정합니다.
2.1 프로젝트 구조
프로젝트 생성 후 기본 폴더 구조는 다음과 같습니다:
- Views: UI 관련 XAML 파일을 포함합니다.
- ViewModels: ViewModel 클래스를 포함합니다.
- Models: 데이터 구조 및 비즈니스 로직 클래스를 포함합니다.
2.2 NuGet 패키지 설치
이 예제에서는 MVVM Light Toolkit를 사용할 것입니다. 이는 MVVM 아키텍처 구현을 간편하게 해주는 도구입니다. NuGet 패키지 관리자에서 MVVM Light Toolkit을 설치합니다.
3. Model 생성하기
제품 정보를 나타내는 Product 클래스를 Models 폴더에 생성합니다.
csharp
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
}
4. ViewModel 작성하기
제품 목록과 선택한 제품 세부 정보를 관리하기 위해 ProductViewModel을 ViewModels 폴더에 작성합니다.
csharp
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System.Collections.ObjectModel;
using System.Linq;
public class ProductViewModel : ViewModelBase
{
private ObservableCollection _products;
private Product _selectedProduct;
public ObservableCollection Products
{
get => _products;
set => Set(ref _products, value);
}
public Product SelectedProduct
{
get => _selectedProduct;
set => Set(ref _selectedProduct, value);
}
public ProductViewModel()
{
LoadProducts();
}
private void LoadProducts()
{
Products = new ObservableCollection
{
new Product { Id = 1, Name = "Product 1", Description = "Description of Product 1", Price = 10.99M },
new Product { Id = 2, Name = "Product 2", Description = "Description of Product 2", Price = 15.49M },
new Product { Id = 3, Name = "Product 3", Description = "Description of Product 3", Price = 7.99M }
};
}
}
5. View (XAML) 작성하기
이제 제품 목록과 세부 정보를 표시할 뷰를 작성합니다. MainWindow.xaml 파일을 열고 다음 코드를 추가합니다.
xml
6. 실행 및 테스트
프로그램을 실행하면 왼쪽에 제품 목록이 표시되고, 오른쪽에는 선택한 제품의 세부 정보가 나타납니다. 리스트에서 제품을 선택하면 해당 제품의 이름, 설명 및 가격이 표시됩니다.
7. 추가 기능: 데이터베이스 연동
이제 간단한 기능을 추가하여 제품 목록을 데이터베이스와 연동할 수 있습니다. Entity Framework를 사용해 보겠습니다. 패키지 관리자 콘솔에서 다음 명령어를 실행하여 설치합니다:
bash
Install-Package EntityFramework
그런 다음, 데이터베이스와 연결하여 제품 목록을 불러오는 코드를 작성합니다. Product 클래스 위에 데이터베이스 관련 속성을 추가하고, DbContext 클래스를 만듭니다.
7.1 DbContext 설정하기
csharp
using System.Data.Entity;
public class ProductContext : DbContext
{
public DbSet Products { get; set; }
}
7.2 제품 로드 업데이트
ViewModel 클래스의 LoadProducts 메소드를 데이터베이스에서 제품을 불러오는 코드로 업데이트합니다.
csharp
private void LoadProducts()
{
using (var context = new ProductContext())
{
Products = new ObservableCollection(context.Products.ToList());
}
}
8. 예외 처리 및 사용자 경험 향상
사용자가 제품을 선택하지 않았을 경우에 대한 예외 처리를 추가합니다. 또한, 선택된 제품이 null일 경우에 대한 처리를 추가합니다.
csharp
public Product SelectedProduct
{
get => _selectedProduct;
set
{
if (Set(ref _selectedProduct, value))
{
// Notify property change for the details
RaisePropertyChanged(nameof(SelectedProduct));
}
}
}
9. 결론
이번 강좌에서는 MVVM 패턴을 사용하여 WPF 애플리케이션을 구성하는 방법을 배웠습니다. 제품 목록을 UI에 표시하고, 선택된 제품의 세부 정보를 표현하는 전체 과정을 통해 MVVM의 장점과 WPF의 데이터 바인딩 기능을 경험했습니다. 이러한 구조를 통해 애플리케이션의 유지 보수성과 확장성을 높일 수 있습니다.
10. 다음 단계
추가적으로 데이터베이스와의 연결, 사용자 입력을 통한 제품 생성 및 수정 기능 등 더 많은 기능을 추가하여 애플리케이션을 확장할 수 있습니다. MVVM 패턴을 활용하여 비즈니스 로직과 UI를 분리함으로써 더욱 견고하고 유연한 애플리케이션 개발을 계속해서 이어나가시기 바랍니다.