1. 디자인 패턴?
프로그램이나 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 사용할 수 있게 정리하여
특정한 " 규약 " 을 통해 쓸 수 있는 형태로 만든 것을 말한다.
웹사이트나 어플리케이션을 만든다면 유지보수를 하고, 다른 이들과 협업할때 좀 더 쉽고 깔끔하게 만들 수 있는
방법을 고안해야한다.
Data를 만들고 가공하고, 또 보여주는 로직이 분리되어 있지 않고 한번에 정의되어 있다면 추후에 유지보수하기가
힘들 것이다.
이것을 돕기 위해서 디자인 패턴이 나왔다.
즉, "효율적인 코드를 만들기 위한 방법론" 이라고 생각하면 된다.
2. MVC 패턴?
MVC는 Model, View, Controller 의 약자이다.
하나의 프로젝트를 구성할 때 구성 요소를 세가지 역할로 구분한 패턴입니다.
Model (데이터)
어플리케이션의 정보, 데이터를 나타냅니다. 데이터베이스, 처음의 정의하는 상수, 초기화 값, 변수 등을 뜻합니다.
비즈니스 로직을 처리한 후 모델의 변경사항을 컨트롤러와 뷰에 전달합니다.
즉, 데이터 가공을 책임지는 컴포넌트를 뜻한다.
Javascript의 Object일 수 있고, API를 통해서 받은 데이터 혹은 서버 DB일 수 있다.
Model은 다음과 같은 규칙을 가지고 있다.
- 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야한다.
- 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 합니다.
- 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야만 합니다.
View (화면)
MVC 패턴은 여러개의 View가 존재할 수 있으며, Model에게 질의하여 데이터를 전달받는다.
받은 데이터를 화면에 표시해주는 역할을 가지고 있으며, Model에게 전달받은 데이터를 별도로 저장하지 않아야한다.
만약 사용자가 화면에 표시된 내용을 변경하게 되면 Model에게 전달해 Model을 변경해야한다.
즉, 사용자에게 보여지는 유저 인터페이스를 의미한다.
웹에서는 최종적으로 HTML과 CSS로 만들어지는 결과물을 의미한다.
View는 다음과 같은 규칙을 가지고 있다.
- 모델이 가지고 있는 정보를 따로 저장하면 안된다.
- 모델이나 컨트롤러와 같은 다른 구성 요소를 몰라야한다.
- 변경이 일어나면 변경 통지에 대한 처리방법을 구현해야한다.
Controller
모델이나 뷰는 서로의 존재를 인지하지 못하고 있다. 그래서 변경사항을 외부로 알리고 수신하는 방법만 있다.
Controller는 이를 중재하기 위해서 모델과 View에 대해서 알고 있어야한다. 모델이나 View로부터 변경 내용이 통지되면
이를 각 구성요소로 통지해준다.
즉, Model이나 View 사이에서 브릿지 역할을 해주며, 사용자가 어플리케이션 조작으로 인해 발생하는 변경 이벤트를
처리하는 역할을 수행한다.
Controller는 다음과 같은 규칙을 가지고 있다.
- 모델이나 뷰에 대해서 알고 있어야 한다.
- 모델이나 뷰의 변경을 모니터링 해야한다.
3. MVC 패턴의 사용 이유
최초에 설계를 꼼꼼하게 진행한 시스템도 유지보수를 진행하다보면 각 기능간의 연결성이 높아지는 경우가 발생한다.
연결성이 높아진 시스템은 유지보수를 진행하다가 다른 비즈니스 로직에 영향으 미쳐 사소한 변경으로 의도치 않은
버그가 발생하게 된다.
문제를 해결하기 위해서 UI 시스템의 핵심 컴포넌트를 Model, View, Controller로 나누고 각 컴포넌트가 자신이 맡은
역할만 수행하고 다른 컴포넌트로 결과를 넘겨주기 때문에 시스템 결합도를 낮출 수 있다.
즉, 유지보수의 편리성을 위해서 라는 점이 가장 크다고 생각한다.
4. MVC 패턴의 단점
복잡한 대규모 프로그램의 경우 다수의 View와 Model이 Controller를 통해 연결되기 때문에 Controller가
불필요하게 커지는 현상이 발생한다.
복잡한 화면을 구성하는 경우에도 동일한 현상이 발생하는데, 이를 'Massive-View-Controller' 라고 한다.
5. MVC 패턴 적용
우선적으로 React는 오직 View만 신경 쓰는 라이브러리다.
하지만 React를 통해서 MVC를 설명해보자면,
Model => state
View => JSX
Controller => 컴포넌트 로직
1) View가 State를 바탕으로 화면에 그려진다.
2) 사용자는 View를 보고 여러가지 작업한다.
3) JSX에 이벤트를 호출하면 Controller가 실행되여 State가 변경되고 다시 JSX가 리렌더링 된다.