Create 상범.md

챕터_8/상범.md

@@ -0,0 +1,109 @@
+# 자바스크립트 MV* 패턴
+
+## MVC 패턴
+
+비즈니스 데이터(모델)과 UI(뷰)를 분리하고 구성요소(컨트롤러)가 로직과 사용자 입력을 관리하는 구조
+
+## 자바스크립트의 MVC (model-view-controller)
+
+> - view: html, css로 만들어진 결과물
+> - model: 객체 or 서버 api로 받는 데이터 or db 데이터 or etc.. 아키텍처에 따라 범주가 달라질듯
+> - controller: model의 데이터를 받아서 화면에 그리고, 화면으로 부터 사용자 동작을 받아서 model 변경하고.. 이런 model과 view 사이에 중간자 역할 하는게 controller   
+>    - jquery가 이벤트 핸들링, 사용자 입력 처리같은 사용자 액션 감지하고 처리하는 역할도 하니까 controller 라고 생각했음
+>    - 근데 jquery는 DOM 조작이나 스타일 변경도 하니까 UI 업데이트 측면에선 view 역할도 함 => MVC 아키텍처를 명확히 지원 안하니까 controller, view 역할 섞이고 스파게티됨 => 유지보수 저하   
+>    - 그래서 Backbone.js 같은 라이브러리 사용하면 jquery 사용하면서 mvc 패턴을 명확히 나눠서 사용할 수 있게 도와준다고 함(안써봐서 모름)   
+
+## MVP
+> 프레젠터는 뷰에 대한 UI 비즈니스 로직을 담당   
+> 프레젠터는 뷰와 분리되어 있으며, 인터페이스를 통해 뷰와 통신함   
+
+## MVVM (model-view-viewModel)
+선언적 데이터 바인딩을 활용하여 뷰에 대한 작업을 다른 계층과 분리할 수 있도록 도와줌
+
+#### 선언적 데이터 바인딩?
+
+> vanila javascript
+> ```js
+> <div>
+>   <input id="input" type="text" />
+>   <p id="message">hello, world</p>
+> </div>
+> 
+> <script>
+>   let message = "";
+> 
+>   const input = document.getElementById("input");
+>   const messageElement = document.getElementById("message");
+> 
+>   input.value = message;
+> 
+>   input.onchange = (event) => {
+>     message = event.target.value;
+>     messageElement.textContent = event.target.value;
+>   };
+> </script>
+> 
+> ```
+> 선언적 데이터 바인딩
+> - react에서 state와 props를 통해 선언적으로 데이터와 UI를 연결하는거나
+> - `{{value}}` 같은 치환문법 또는 `v-bind="value"`와 같은 뷰 양방향 데이터 바인딩을 말하는거 같음
+> ```js
+> function App() {
+>   const [message, setMessage] = React.useState("");
+> 
+>   return (
+>     <div>
+>       <input 
+>         value={message} 
+>         onChange={(e) => setMessage(e.target.value)} 
+>       />
+>       <p>{message}</p>
+>     </div>
+>   );
+> }
+> ```
+
+근데 위 코드에서 setState()가 viewModel 역할을 하는게 아닌가 생각이 들었고, view 와 viewModel을 명시적으로 분리하면 mvvm 아닌가 생각이 들었음
+
+> ```js
+> const useMessageViewModel = () => {
+>   const [message, setMessage] = React.useState("");
+> 
+>   const handleChange = (e) => {
+>     setMessage(e.target.value);
+>   };
+> 
+>   return { message, handleChange };
+> }
+> 
+> const App = () => {
+>   const { message, handleChange } = useMessageViewModel();
+> 
+>   return (
+>     <div>
+>       <input 
+>         value={message} 
+>         onChange={handleChange} 
+>       />
+>       <p>{message}</p>
+>     </div>
+>   );
+> }
+> ```
+
+
+
+## mv* 패턴과 리액트
+
+리액트는 뷰 계층을 원하는대로 구성하게 해주는 렌더링 라이브러리 일분이다.  
+기존 MVC와 같이 중앙 제어 역할을 하는 컨트롤러 혹은 라우터 기능이 포함되어 있지 않다.  
+
+vue.js는 공식적으로 뷰모델을 사용하는 MVVM 패턴이라고 주장함
+> 양방향 바인딩 때문에
+
+> 책에서 리액트를 예시로 들면서 모델 => 비동기 데이터, 뷰 => 컴포넌트, 컨트롤러 => 훅 으로 이해하는게 도움될 수 이지만 비유일 뿐 엄밀한 뜻은 아니라고 함   
+> 컨트롤러 좀 헷갈림   
+
+
+
+