[디자인패턴] MVC 패턴의 간단한 개념과 구현 예시

MVC 패턴의 개념을 설명하는 document나 블로그는 많으니, 간단하게 정리하고 그 예시에 대해서 자세히 알아보자.

 

 

MVC 패턴이란?

"MVC(모델-뷰-컨트롤러)는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다."

(참고 문헌: https://developer.mozilla.org/ko/docs/Glossary/MVC )

MVC (Model-View-Controller) 패턴

Model: 데이터와 비즈니스 로직을 처리한다.

View: 사용자에게 표시되는 인터페이스를 담당한다.
Controller: 사용자의 입력을 처리하고 Model과 View를 관리한다.

 

결과적으로 이 패턴을 사용함으로서 코드의 재사용성과 유지보수성을 높이는 것을 기대한다.

 

주로 프론트엔드에서 사용하는 패턴이니 javascript의 예시로 확인하자.

 

// Model
class UserModel {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  getName() {
    return this.name;
  }
  
  getAge() {
    return this.age;
  }
  
  setName(name) {
    this.name = name;
  }
  
  setAge(age) {
    this.age = age;
  }
}

// View
class UserView {
  displayUser(user) {
    console.log(`Name: ${user.getName()}, Age: ${user.getAge()}`);
  }
  
  displayErrorMessage(message) {
    console.log(`Error: ${message}`);
  }
}

// Controller
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  
  updateUser(name, age) {
    if (name && age) {
      this.model.setName(name);
      this.model.setAge(age);
      this.view.displayUser(this.model);
    } else {
      this.view.displayErrorMessage("Invalid input");
    }
  }
}

// Usage
const user = new UserModel("Elon Musk", 52);
const view = new UserView();
const controller = new UserController(user, view);

controller.updateUser("Charlie Kim", 30);

UserModel은 데이터와 관련된 비즈니스 로직을 처리하는 모델을 나타낸다.

UserView는 사용자에게 정보를 표시하는 뷰를 담당하고, UserContoller는 사용자의 입력을 처리하고 Model과 View를 관리하는 역할을 한다.

Controller의 "updateUser" 메서드는 사용자의 이름과 나이를 인자로 받아 Model의 데이터를 업데이트하고, View를 통해 업데이트된 정보를 표시한다. 입력이 유효하지 않을 경우에는 View를 통해 에러 메시지를 표시한다.

이런식으로 Model, View, Controller 간의 역할을 분리하여 코드를 구성하면, 코드의 재사용성과 유지보수성이 향상됨을 기대 할 수 있다.