MVC 패턴이란? 짧게 설명하기 / (Model, View, Controller 패턴이란?)

MVC 패턴이란? (Model, View, Controller 패턴이란?)

• 화면 개발에서 많이 쓰이는 디자인 패턴이다.
• MVC 는 각각 Model, View, Controller 를 의미한다.

모델 (Model) 이란?

앱의 데이터를 저장하고 관리하는 역할

• 데이터를 관리하는 역할이다.
• API, DB, 로컬 저장소 등에 있는 데이터를 가져와 앱에서 사용할 수 있는 모양으로 만든다.
• 데이터를 추가하거나 수정하거나 삭제할 수 있는 방법도 알고 있다.

뷰 (View) 란?

사용자에게 보여지는 화면을 구성하고 업데이트하는 역할

• 화면을 관리하는 역할이다.
• HTML, CSS, JS 를 포함한다.
• 데이터를 받아 화면에 UI 를 렌더링한다.
• 이벤트가 발생했음을 감지하고 컨트롤러에 전달한다.

컨트롤러 (Controller) 란?

모델과 뷰 사이의 중개자 역할 및 사용자 상호작용을 처리

• 뷰에서 전달한 이벤트에 따라 모델이 애플리케이션 상태를 관리할 수 있게 해준다.
• 모델이 가진 데이터를 뷰에게 전달해서 화면을 만든다.
• 모델과 뷰는 독립적으로 존재한다.
• 컨트롤러는 독립적인 모델과 뷰를 연결하고 움직이는 주체다.

다이어그램으로 살펴보기

코드로 살펴보기

// Model
const model = {
  data: [],
  getData() {
    // API 호출 또는 로컬 스토리지에서 데이터 로드
  },
  saveData() {
    // API 호출 또는 로컬 스토리지에 데이터 저장
  },
};

// View
const view = {
  render() {
    // 모델의 데이터를 기반으로 HTML 템플릿 렌더링
  },
  update() {
    // 모델 변경 시 화면 동적 업데이트
  },
};

// Controller
const controller = {
  init() {
    // 모델 데이터 로드
    model.getData();
    // 뷰와 모델 연결
    view.render(model.data);
  },
  onUserAction(action) {
    // 사용자 입력 처리
    switch (action) {
      case "ADD_TODO":
        // 모델에 데이터 추가 요청
        model.addData(data);
        // 뷰 업데이트
        view.update();
        break;
      // ...
    }
  },
};

// 앱 시작
controller.init();