MVC 패턴은어떻게 나눌 것인가? 에 대한 해답 중 하나이다. 역할 분담을 할 때 가이드라인을 제시하는 방법 중하나이다.
디자인패턴
설계 시 자주 발생하는 문제들을 피하기 위해 사용되는 패턴이다.
협업해서 개발할 때, 다른 사람이 작성한 코드와 기존 코드를 이해하는 것은 어렵다. 이로 인해 시간과 예산이 소모된다. 디자인패턴은 의사소통 수단의 일종으로서 이런 문제를 해결한다.
MVC
Model, View, Controller의 약자이다.
사용자가 controller를 조작하면
controller는 model을 통해 데이터를 가져오고
그 정보를 바탕으로 시각적인 표현을 담당하는 view를 제어해서 사용자에게 전달한다.
Model
애플리케이션의 정보, 데이터이다.
데이터베이스, 처음 정의하는 상수, 초기화값, 변수 등을 의미한다.
model의 상태에 변화가 있을 때 controller와 view에 이를 통보한다.
이를 통해 view는 최신 결과를 보여줄 수 있고, controller는 모델의 변화에 따른 적용 가능한 명령을 추가,제거, 수정할 수 있다.
- 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.
- 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 한다.
- 변경이 일어나면, 이벤트를 발생시켜 누군가에게 전달해야 하며, 누군가가 모델을 변경하도록 이벤트를 보냈을 때 이를 수신할 수 있는 처리 방법을 구현해야 한다.
View
사용자에게 보여지는 부분, 즉 유저 인터페이스를 의미한다.
사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어온다.
- 모델이 가지고 있는 정보를 따로 저장해서는 안된다.
- 모델이나 컨트롤러와 같이 다른 구성 요소들을 몰라야된다.
- 화면에서 사용자가 내용을 변경하면 이를 모델에게 전달해서 모델을 변경해야 한다.
Controller
model과 view의 다리역할이다.
모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다.
뷰는 여러 개의 컨트롤러를 가지고 있다.
사용자는 controller를 사용하여 model의 상태를 바꾼다.
medel의 상태가 바뀌면 등록된 뷰에 자신의 상태가 바뀌었다는 것을 알리고 뷰는 거기에 맞춰 사용자에게 model의 상태를 보여준다.
ex)사용자가 데이터를 클릭하고, 수정하는 것에 대한 '이벤트'들을 처리하는 부분이다.
- 모델이나 뷰에 대해서 알고 있어야 한다.
- 모델이나 뷰의 변경을 모니터링 해야 한다.
왜 MVC 패턴?
사용자가 보는 페이지, 데이터 처리, 그리고 중간에서 제어하는 컨트롤, 이 3가지로 나누면 각각 맡은바에만 집중할 수 있다.
서로 분리되어 각자의 역할에 집중할 수 있게하여 개발을 하고 그렇게 만들면, 유지보수성, 애플리케이션의 확장, 그리고 유연성이 증가하고, 중복 코딩이라는 문제점 또한 사라지게 된다.
- 유연성 : 클라이언트의 새로운 요구사항에 대해 최소한의 비용으로 보다 유연하게 대처할 수 있는 것
이 중 react는 view만 신경쓰는 라이브러리이다. 단방향 데이터 흐름으로 DOM 객체를 갱신한다.
