🚀 WPF MVVM Command 패턴 완전 정복

WPF에서 MVVM 패턴을 사용할 때 버튼 클릭 등의 이벤트를 처리하는 가장 중요한 개념이 Command 패턴입니다.
이 글에서는 ICommand 인터페이스와 RelayCommand 구현을 실제 코드와 함께 상세히 소개합니다.

📚 목차

1. 왜 Command 패턴이 필요한가?
2. ICommand 인터페이스 구조
3. RelayCommand 구현
4. 실습 예제: 버튼 클릭으로 메시지 변경
5. CanExecute 조건 사용 예
6. 마무리 및 다음 글 안내

1. 왜 Command 패턴이 필요한가?

MVVM에서는 View가 ViewModel의 메서드를 직접 호출할 수 없습니다.
Command는 View와 ViewModel 간의 간접적인 상호작용을 가능하게 합니다.

🟢 코드 비하인드(XAML.cs)를 줄이고 테스트 가능성 향상
🟢 Button, MenuItem, ListBox 등 다양한 컨트롤에서 사용 가능
🟢 MVVM 구조를 유지하면서 이벤트 처리 가능

2. ICommand 인터페이스 구조

WPF의 모든 커맨드는 ICommand를 구현해야 합니다.


public interface ICommand
{
    event EventHandler CanExecuteChanged;

    bool CanExecute(object parameter);
    void Execute(object parameter);
}

- `CanExecute()`는 커맨드 실행 가능 여부를 반환 (버튼 활성화 조건 등) - `Execute()`는 커맨드가 실행될 때 호출되는 메서드

3. RelayCommand 구현

반복적인 ICommand 구현을 줄이기 위해 보통 RelayCommand 또는 DelegateCommand를 직접 만들어 사용합니다.

✔️ 기본 RelayCommand 구현


using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action<object> execute;
    private readonly Predicate<object> canExecute;

    public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
    {
        this.execute = execute ?? throw new ArgumentNullException(nameof(execute));
        this.canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => canExecute == null || canExecute(parameter);
    public void Execute(object parameter) => execute(parameter);

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

4. 실습 예제: 버튼 클릭으로 메시지 변경

✔️ MainWindow.xaml

<Window x:Class="CommandSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CommandSample"
        Title="Command 예제" Height="200" Width="400">

    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>

    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="{Binding Message}" FontSize="20" Margin="0,0,0,10"/>
        <Button Content="변경하기" Command="{Binding ChangeMessageCommand}" Width="120"/>
    </StackPanel>
</Window>

✔️ MainViewModel.cs


using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

namespace CommandSample
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private string message = "초기 메시지";
        public string Message
        {
            get => message;
            set { message = value; OnPropertyChanged(); }
        }

        public ICommand ChangeMessageCommand { get; }

        public MainViewModel()
        {
            ChangeMessageCommand = new RelayCommand(_ =>
            {
                Message = "Command로 변경됨!";
            });
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string name = null)
            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

5. CanExecute 조건 사용 예

사용자가 조건을 만족할 때만 버튼을 활성화하고 싶을 때는 CanExecute를 설정하면 됩니다.


ChangeMessageCommand = new RelayCommand(
    execute: _ => Message = "조건 만족!",
    canExecute: _ => Message.Length < 10
);

위 코드에서는 메시지 길이가 10자 미만일 때만 버튼이 활성화됩니다.
WPF는 CommandManager.RequerySuggested를 통해 자동으로 UI 상태를 업데이트합니다.

6. 마무리 및 다음 글 안내

MVVM에서 Command 패턴은 View와 ViewModel을 연결하는 핵심 역할을 합니다.
RelayCommand는 이를 효율적으로 구현할 수 있는 도구이며, 실무에서도 거의 모든 프로젝트에서 활용됩니다.

다음 시리즈에서는 UserControl과 CustomControl의 차이점과 실제 사용 방법에 대해 소개할 예정입니다.

이 글이 도움이 되셨다면 댓글과 공유 부탁드려요! 🙌