# 모델-뷰-컨트롤러(Model-View-Controller, MVC)
모델-뷰-컨트롤러(Model-View-Controller, MVC)는
소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다.
이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나
그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다.
MVC에서
- 모델은 애플리케이션의 정보(데이터)를 나타내며,
- 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고,
- 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.
구성요소
- 컨트롤러는 모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다. (ex : 워드 프로세서에서 문서를 편집하는 것)
또, 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다. (문서를 스크롤하는 것)
- 모델은 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를 보여줄 수 있고,
컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가/제거/수정할 수 있다.
어떤 MVC 구현에서는 통보 대신 뷰나 컨트롤러가 직접 모델의 상태를 읽어 오기도 한다.
- 뷰는 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.
[웹 애플리케이션에서 일반적인 MVC 구성요소 다이어그램]
모델
모델(model)이란 어떠한 동작을 수행하는 코드를 말한다. 표시 형식에 의존하지 않는다. 다시 말해, 사용자에게 어떻게 보일지에 대해 신경쓰지 않아도 된다. 모델은 순수하게 public 함수로만 이루어진다. 몇몇 함수들은 사용자의 질의(query)에 대해 상태 정보를 제공하고 나머지 함수들은 상태를 수정한다.
뷰
MVC에서 모델은 여러 개의 뷰(view)를 가질 수 있다. 뷰는 모델에게 질의를 하여 모델로 부터 값을 가져와 사용자에게 보여준다.
컨트롤러
MVC의 뷰는 여러 개의 컨트롤러(Controller)를 가지고 있다. 사용자는 컨트롤러를 사용하여 모델의 상태를 바꾼다. 컨트롤러는 모델의 mutator 함수를 호출하여 상태를 바꾼다. 이때 모델의 상태가 바뀌면 모델은 등록된 뷰에 자신의 상태가 바뀌었다는 것을 알리고 뷰는 거기에 맞게 사용자에게 모델의 상태를 보여 준다.
원리
자바언어에서 모델은 java.util.Observable을 상속(extends)받아 만들 수 있다.
모델에는 현재의 상태 정보를 변경하거나 다른 클래스에게 알릴 수 있는 함수가 있어야 한다.
모델의 상태를 변경하는 함수(mutator)는 setChanged()와 notifyObservers()를 호출하여야 한다.
NotifyObser는 모델에 등록된 모든 뷰에게 업데이트 메시지를 보내게 된다.
뷰는 java.util.Observer를 implement하여 만들면 update method를 구현할 수 있다.
update함수의 두 번째 매개변수는 Object 모델에서 넘어온 추가정보를 받는 데에 사용된다.
interface Observer {
void update(Observable t, Object o);
}
뷰는 반드시 모델에게 질의하여 업데이트하는 부분이 구현되야 한다.
모델은 addObserver라는 함수를 이용하여 뷰를 자신에게 등록시킨다.
모델은 자신에게 등록된 모든 뷰를 기억하고 있다가 자신의 상태가 바뀌게 되면 등록된 모든 뷰에 notify 함수를 호출하여 뷰를 update시킨다.
모델은 뷰를 여러 개 가질 수 있다. MVC에서는 이것을 허용하고 있다. 또한 뷰도 여러개의 모델에 등록될 수 있다.
'Front-end dev > Etc.' 카테고리의 다른 글
| codepen 불러오기 (587) | 2020.07.08 |
|---|---|
| vscode와 Git 연동하기 (530) | 2020.01.17 |
| [Node.js] listen EADDRINUSE Error (514) | 2020.01.06 |
| Front-end 로드맵(v.2020) (887) | 2020.01.03 |
| Front-end 로드맵(v.2018) (518) | 2018.03.29 |