[Design Pattern] MVC(Model-View-Controller) 패턴 이야기 #2 (예제 포함)

지난 포스팅에서 MVC 패턴에 대해 소개를 했었습니다.
[Design Pattern] MVC(Model-View-Controller) 패턴 이야기 #1

이번 포스팅에서는 MVC 패턴을 적용한 윈폼(WinForm) 예제를 소개하려고 합니다. 

MVC 패턴을 적용한 전화번호부 프로그램

이전 포스팅에서 MVC 패턴에 대한 이론적인 설명이 있었습니다. 하지만 처음 접하는 분들에게는 개념적으로 이해가 잘 되지 않을 것이라 생각합니다. 제 설명이 부족한 점도 있지만, 무엇보다 코드를 보면 이해가 더욱 쉬울 거라 생각하여 예제 프로그램을 만들었습니다.

예제 코드는 '전화번호부'를 예시로 작성했습니다. 사용자의 정보를 입력하고, 조회하고, 제거하는 간단한 프로그램입니다. 즉, 데이터의 추가와 제거, 갱신이 이루어지는데 이것을 MVC 패턴을 적용하여 역할별로 나누었다고 이해하면 될 것 같습니다.

아래 애니메이션은 예제 코드 동작을 보여줍니다. 프로그램 시작 시 4명의 정보가 입력되어 있고, 기존 정보를 지우거나 새로 입력할 수 있습니다.

예제 코드 동작

MVC 구조는 아래와 같습니다. 모델에는 사람의 정보가 리스트로 구현되어 있고, 뷰에는 사람 목록과 생성 / 제거 / 추가할 수 있는 버튼과 텍스트 박스로 이루어져 있습니다. 마지막으로 컨트롤러는 중간에 위치하여 여러 기능을 수행합니다. 

MVC 예제 프로그램 다이어그램

코드 설명

코드는 모델 / 컨트롤러 / 뷰 그리고 마지막은 메인 프로그램 순으로 설명하겠습니다. 예제 코드의 UML은 다음과 같습니다.

예제 프로그램 UML

모델(Model)

Customer 클래스에 ID와 Name, Phone, Address 정보를 get/set 할 수 있습니다.

namespace MVCPattern.Model
{
    public class Customer
    {
        public Customer(string id, string name, string phone, string address)
        {
            _id = id;
            _name = name;
            _phone = phone;
            _address = address;
        }
        string _id;
        public string ID
        {
            get { return _id; }
            set { _id = value; }
        }
        string _name;
        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }
        string _phone;
        public string Phone
        {
            get { return _phone; }
            set { _phone = value; }
        }
        string _address;
        public string Address
        {
            get { return _address; }
            set { _address = value; }
        }
    }
}

컨트롤러(Controller)

컨트롤러에서는 뷰에 직접적으로 접근하지 않고, View interface에 접근합니다. 물론, interface 없이 직접 접근해도 상관은 없지만 공통점이 많은 뷰를 직접 접근하기 보다는 interface에 접근하게 구현하는 것이 코드가 더 간결해집니다.
뷰 인터페이스에는 텍스트 박스에 보여지거나 목록을 지우거나, 버튼이 클릭됐을 때 수행되는 동작들이 기본으로 정의되어 있고, 그 외 몇 가지 기능이 정의되어 있습니다.

namespace MVCPattern.Controller
{
    public interface IView
    {
        void setController(Controller controller);
        void clearList();
        void addCustomer(Customer customer);
        void removeCustomer(Customer customer);
        void updateListWithCustomer(Customer customer);
        string getSelectedCustomerID();
        void setSelectedCustomer(Customer customer);
        string Name { get; set; }
        string Address { get; set; }
        string Phone { get; set; }
        string ID { get; set; }
        bool isModify { set; }
    }
}

컨트롤러에는 위에 정의한 뷰 인터페이스와 모델을 갖고 있습니다. Customer 정보가 View에 넘기거나 View의 정보가 Customer로 넘기거나, Customer 목록을 업데이트하거나, Customer를 추가/삭제하거나 등 모든 기능이 컨트롤러에 구현되어 있습니다.

namespace MVCPattern.Controller
{
    public class Controller
    {
        IView _view = null;
        IList _customers = null;
        Customer _selectedCustomer;

        public Controller(IView view, IList customers)
        {
            _view = view;
            _customers = customers;
            view.setController(this);
        }
        
        private void updateView(Customer customer)
        {
            _view.ID = customer.ID;
            _view.Name = customer.Name;
            _view.Phone = customer.Phone;
            _view.Address = customer.Address;
        }

        private void updateCustomer(Customer customer)
        {
            customer.ID = _view.ID;
            customer.Name = _view.Name;
            customer.Phone = _view.Phone;
            customer.Address = _view.Address;
        }

        public void LoadView()
        {
            _view.clearList();
            foreach (Customer customer in _customers)
                _view.addCustomer(customer);

            _view.setSelectedCustomer((Customer)_customers[0]);
        }

        public void SelectedCustomer(string selectedCustomerId)
        {
            foreach (Customer customer in this._customers)
            {
                if (customer.ID == selectedCustomerId)
                {
                    _selectedCustomer = customer;
                    updateView(customer);
                    _view.setSelectedCustomer(customer);
                    this._view.isModify = false;
                    break;
                }
            }
        }
        public void AddNewCustomer()
        {
            _selectedCustomer = new Customer("", "", "", "");
            updateView(_selectedCustomer);
            _view.isModify = true;
        }

        public void RemoveCustomer()
        {
            string id = this._view.getSelectedCustomerID();
            Customer customerToRemove = null;

            if (id != "")
            {
                foreach (Customer customer in _customers)
                {
                    if (customer.ID == id)
                    {
                        customerToRemove = customer;
                        break;
                    }
                }

                if (customerToRemove != null)
                {
                    int index = _customers.IndexOf(customerToRemove);
                    _customers.Remove(customerToRemove);
                    _view.removeCustomer(customerToRemove);

                    if (index > -1 && index < _customers.Count)
                    {
                        _view.setSelectedCustomer((Customer)_customers[index]);
                    }
                }
            }
        }

        public void Register()
        {
            updateCustomer(_selectedCustomer);
            if (!_customers.Contains(_selectedCustomer))
            {
                _customers.Add(_selectedCustomer);
                _view.addCustomer(_selectedCustomer);
            }
            else
            {
                _view.updateListWithCustomer(_selectedCustomer);
            }
            _view.setSelectedCustomer(_selectedCustomer);
            _view.isModify = false;
        }
    }
}

뷰(View)

뷰에는 View Interface와 버튼 및 리스트 뷰 이벤트가 구현되어 있습니다. 코드가 너무 긴 관계로 자세한 내용은 하단에 첨부된 예제 파일을 참고해주세요.

namespace MVCPattern.View
{
    public partial class MainForm : Form, IView
    {
        MVCPattern.Controller.Controller _controller;
        public MainForm()
        {
            InitializeComponent();
        }
        public void setController(MVCPattern.Controller.Controller controller)
        {
            _controller = controller;
        }

        public void clearList() {...}

        public void addCustomer(Customer customer) {...}

        public void updateListWithCustomer(Customer customer) {...}
        
        public void removeCustomer(Customer customer) {...}
        
        public string getSelectedCustomerID() {...}
        
        public void setSelectedCustomer(Customer customer) {...}
                       
        private void buttonRemoveCustomer_Click(object sender, EventArgs e)
        {
            _controller.RemoveCustomer();
        }

        private void buttonRegister_Click(object sender, EventArgs e)
        {
            _controller.Register();
        }

        private void listViewCustomer_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (listViewCustomer.SelectedItems.Count > 0)
                _controller.SelectedCustomer(listViewCustomer.SelectedItems[0].Text);
        }

        private void buttonNewCustomer_Click(object sender, EventArgs e)
        {
            _controller.AddNewCustomer();
        }
    }
}

프로그램 메인

메인에서 뷰와 데이터를 생성합니다. 그리고 컨트롤러를 생성하는데, 뷰와 데이터를 인자로 넘깁니다.

namespace ExamMVC
{
    static class Program
    {
        /// <summary>
        /// 해당 애플리케이션의 주 진입점입니다.
        /// </summary>
        [STAThread]
        static void Main()
        {
            MainForm form = new MainForm();

            // Add some dummy data
            IList users = new ArrayList();
            users.Add(new Customer("1", "김철수", "010-1234-5678", "서울시 강동구"));
            users.Add(new Customer("2", "이수지", "010-0000-1111", "서울시 강남구"));
            users.Add(new Customer("3", "최수정", "010-2222-3333", "서울시 강서구"));
            users.Add(new Customer("4", "박재수", "010-4444-5555", "서울시 강북구"));

            Controller controller = new Controller(form, users);
            controller.LoadView();
            form.ShowDialog();
        }
    }
}

자세한 내용은 첨부된 코드를 참고해주세요.

ExamMVC.zip

0.76MB