MVC (Model-View-Controller) 패턴

namu·2025년 1월 11일
post-thumbnail

MVC(Model-View-Controller)란?

사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴

이 패턴을 성공적으로 사용하면,

사용자 인터페이스(UI)로부터 비즈니스 로직을 분리하여
애플리케이션의 시각적 요소나 그 이면에서 실행되는 로직을 서로 영향 없이 쉽게 고칠 수 있습니다. - 관심사 분리

위키백과 - MVC 다이어그램 2 [자료1] 웹 애플리케이션에서의 일반적인 MVC 구성 요소 다이어그램


Model-View-Controller 관계

위키백과 - MVC 다이어그램 1 [자료2] 관계를 간단하게 묘사하는 다이어그램


Model-View-Controller 의 역할

1. 모델 (Model) : 애플리케이션의 데이터(정보)

Model의 상태에 변화가 있을 때 다시 말해,
애플리케이션의 데이터 가 변경되었을 때, 컨트롤러와 뷰에게 통보합니다.

이와 같은 통보를 통해서

  • View는 최신의 결과를 보여줄 수 있고,
  • Controller는 모델의 변화에 따른 적용 가능한 명령을 추가/제거/수정할 수 있습니다.

어떤 MVC 구현에서는 통보 대신 View나 Controller가 직접 Model의 상태를 읽어 오기도 합니다.

📌 Model 이 가지는 규칙
1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.
2. View나 Controller에 대해서 어떤 정보도 알지 말아야 한다.
3. 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야만 한다.

2. 뷰 (View) : 사용자 인터페이스(UI) 요소

데이터를 직접 처리하지 않고, Controller를 통해 데이터를 전달받습니다.
( Model에 직접 접근하지 않는 것이 일반적입니다. )
전달받은 Model의 데이터를 사용자에게 시각적으로 보여주는 역할을 수행합니다.

사용자에게 보여지는 화면이라고 볼 수 있습니다.

📌 View가 가지는 규칙
1. Model이 가지고 있는 정보를 따로 저장해서는 안된다.
2. Model이나 Controller를 알고 있을 필요가 없다.
3. 변경이 일어나면 변경통지에 대한 처리방법을 구현해야만 한다.

🙋 View는 Model로부터 데이터를 가져올까, Controller로부터 가져올까?

일반적으로 Controller가 Model에서 데이터를 가져와 View에 전달합니다. 즉, View는 직접 Model과 상호작용하지 않고, Controller를 통해 간접적으로 데이터를 받습니다.

하지만 일부 MVC 구현에서는 View가 직접 Model에서 데이터를 가져오는 경우도 있습니다. 이를 "Passive View"와 "Supervising Controller" 같은 변형 패턴에서 볼 수 있습니다.

3. 컨트롤러 (Controller) : Model 과 View 사이에서 데이터 흐름을 제어

사용자로부터의 입력에 대한 응답으로 Model/View를 업데이트하는 로직을 포함합니다. - View 와 Model 사이에서 중개 역할

  • Model에 명령을 보냄으로써 Model의 상태(데이터)를 업데이트할 수 있다.
  • 관련된 View에 명령을 보냄으로써 Model의 상태 변경 없이 표시 방법을 바꿀 수 있다.
    (예: 최신순으로 정렬하는 것)

📌 Controller 가 가지는 규칙
1. Model이나 View에 대해서 알고 있어야 한다.
2. Model이나 View의 변경을 모니터링 해야 한다.


참조

mdn - MVC
wikipedia - MVC
ChatGPT - MVC
https://velog.io/@langoustine/%EC%97%AC%EA%B8%B0%EB%8F%84-MVC-%EC%A0%80%EA%B8%B0%EB%8F%84-MVC-MVC-%ED%8C%A8%ED%84%B4%EC%9D%B4-%EB%AD%90%EC%95%BC

profile
web dev

0개의 댓글