MVC

Hunter Joe·2025년 4월 28일

React의 탄생 배경중 이 MVC 모델을 극복하기 위한 말을 들었다.
하지만 나는 React 이전의 개발 (jQuery, 바닐라.js)을 잘 하지 않았던 탓에 이런 패턴에 익숙하지 않다.
그래서 이번에는 MVC 패턴을 한번 이해해보고자 글을 작성했다.

📌 MVC Model-View-Controller

MVC는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 S/W 디자인 패턴
S/W의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있다.
"관심사 분리"(로직 분리)는 더 나은 관리를 위해 제공한다.

S/W를 Model, View, Controller라는 3가지 구성 요소로 구분한 개발 방법론

MVC에 기반을 둔 다른 디자인 패턴으로는 MVVM, MVP, MVW가 있다.

Model : 데이터와 비즈니스 로직을 관리
View : 레이아웃과 화면을 처리
Controller : 모델과 뷰로 명령을 전달

Model

Model은 App이 포함해야할 데이터가 무엇인지를 정의
데이터의 상태가 변경되면 일반적으로 Model → View에게 알림(필요한 대로 화면 변경)
가끔 Controller에게도 알림 (업데이트 된 View를 조절하기 위해 다른 로직이 필요한 경우)

Model에는 App의 정보, 데이터를 나타내며 처음의 정의하는 상수, 초기화값, 변수 등을 말한다.
Model은 다음과 같은 규칙을 가지고 있다.

1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.
→ 글자내용, 글자의 위치, 글자의 포멧 정보, 화면의 위치정보 등

2. View나 Controller에 대한 정보를 알면 안된다.
→ 데이터 변경이 일어났을 때 UI를 직접 조정해서 수정할 수 있도록 View를 참조하는 내부 속성값을 가지면 안된다.

3. 변경이 일어나면 변경 통지에 대한 처리방법을 구현해야만 한다.
→ 모델의 속성 중 텍스트 정보가 변경되면 이벤트를 발생시켜 누군가에게 전달해야하며 누군가 Model을 변경하도록 요청하는 이벤트를 보냈을 때 이를 수신할 수 있는 처리 방법을 구현해야한다. 이는 모델이 변경되는 방법을 다른 구성요소들에게 알려주는 방법

View

View는 App의 데이터를 보여주는 방식을 정의 : 화면에 표시되는 글자, 체크박스, 윈도우와 같은 UI라는 시각적 요소를 지칭

1. Model이 가지고 있는 정보를 따로 저장해서는 안된다.
→ 화면에 텍스트를 표시하기 위해 모델 정보를 전달 받을 때 그 정보를 유지하기 위해 임의로 View 내부에 해당 데이터를 저장하면 안된다. 단순히 텍스트를 표시하는 역할만하고 화면을 그릴 때 필요한 정보들을 저장하지 않는다.

2. Model이나 Controller에 대한 정보를 알 필요가 없다.
→ Model과 같이 자기 자신을 빼고는 다른 요소는 어떻게 동작하거나 참조하는지 알아서는 안된다.

3. 변경이 일어날 경우 변경 통지에 대한 처리 방법을 구현해야만 한다.
→ Modle과 같이 변경이 일어났을 때 이에 누군가에게 변경을 알리는 방법을 구현해야 한다.
View에서는 화면에서 사용자가 화면에 표시된 내용을 변경하게 되면 이를 Model에게 전달해 Model을 변경해야 할 것인데 그 작업을 위한 변경 통지를 구현한다.

Controller

Controller는 App의 사용자로부터의 입력에 대한 응답으로 Model/View를 업데이트하는 로직을 포함
주로 비즈니스 로직 구현

Controller는 다음 규칙을 이해해야 한다.
1. Model이나 View에 대해 알고 있어야 한다.
→ Model이나 View는 변경을 외부로 알리고 수신하는 방법만을 알고 서로의 존재는 모른다.
서로 모르는 둘을 Controller가 중재하기 때문에 Controller는 Model과 View에 대해 알고 있어야 한다.

2. Model이나 View의 변경을 모니터링 해야한다.
→ Model과 View의 변경을 통지 받으면 이를 해석해 각각의 구성 요소에게 통지를 해야 하기에
둘을 추적하고 있어야 한다.