(출처:https://heo-dev-0229.tistory.com/46)

MVVM 아키텍쳐란?

Model:

• 애플리케이션의 데이터 및 비즈니스 로직을 나타냅니다.
• 데이터를 보유하고 애플리케이션의 동작을 정의하는 MVC의 모델과 유사할 수 있습니다.

View:

• 애플리케이션의 사용자 인터페이스(UI)를 나타냅니다.
• 사용자에게 데이터를 표시하고 사용자 입력을 받는 일을 담당합니다.
• MVVM의 뷰는 수동적입니다.
• 즉, 비즈니스 로직이나 데이터 조작 로직이 포함되어 있지 않습니다.

ViewModel:

• 모델과 뷰 사이에 위치하며 중개자 역할을 합니다.
• 보기가 데이터를 표시하고 상호 작용하는 데 필요한 데이터 및 명령을 노출합니다.
• 여기에는 표시할 데이터 형식 지정, 사용자 입력 처리 및 보기 상태 관리와 같은 표시 논리가 포함됩니다.

MVVM 아키텍쳐는 왜 사용할까?

데이터 바인딩

• MVVM의 핵심 개념은 데이터 바인딩으로, 뷰와 뷰 모델을 느슨하게 결합할 수 있습니다.
• 뷰 모델의 데이터가 변경되면 자동으로 뷰를 업데이트하고 사용자가 뷰와 상호 작용하면 뷰 모델을 업데이트합니다.
• 이 양방향 데이터 바인딩을 통해 명시적인 이벤트 처리나 콜백 없이 뷰와 뷰 모델 간의 원활한 동기화가 가능합니다.

DOM을 직접 조작하지 않아도 됨

• Model이 변하면 View를 수정하고 View에서 이벤트를 받아서 Model를 변경한다는 Controller의 역할은 그대로 인데 이를 구현하는 방식이 jQuery와 같은 DOM 조작에서 템플릿과 바인딩을 통한 선언적인 방법으로 변하게 됩니다.
• 이제는 코드에서 DOM을 조작하는 코드가 사라지고 이 기능들은 프레임워크가 담당하게 됩니다. 이제 개발자는 화면에 그려져야할 데이터만 만들어서 프레임워크에 전달해주면 프레임워크가 알아서 그려줍니다.
• 이를 View를 그리는 Model만 다루게 되었다는 의미로 ViewModel이라고 부르며 이 방식을 MVVM이라고 부르게 됩니다.
  • 이후 나오는 프레임워크인 React, Vue, Angular2, Svelte등 어떤 방식의 템플릿과 바인딩 문법을 쓰느냐 방식만 다를 뿐 MVVM이라는 아키텍쳐는 그대로 유지되게 됩니다.
• 웹의 DOM API를 잘 다루지 못하더라도 비지니스로직에만 집중한다면 금방 금방 서비스를 만들 수가 있게 됩니다.

MVVM 아키텍쳐는 어떻게 사용할까?

예시 코드

import React, { useState } from 'react';

// Model - Represents the data
const initialData = {
  name: '',
  age: '',
};

// View - Renders the UI
const App = () => {
  const [data, setData] = useState(initialData);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setData({ ...data, [name]: value });
  };

  return (
    <div>
      <input
        type="text"
        name="name"
        value={data.name}
        onChange={handleInputChange}
      />
      <input
        type="number"
        name="age"
        value={data.age}
        onChange={handleInputChange}
      />
      <DisplayData data={data} />
    </div>
  );
};

// ViewModel - Handles the business logic and communicates with the Model and View
const DisplayData = ({ data }) => {
  // Business logic for displaying data
  const formattedData = `Name: ${data.name}, Age: ${data.age}`;

  return <p>{formattedData}</p>;
};

export default App;

• 이 예에서 App구성 요소는 view를 나타내고 DisplayData구성 요소는 ViewModel을 나타내고 initialData는 model을 나타냅니다.
• App구성 요소는 useState후크를 사용하여 상태를 관리하고 데이터를 props로 DisplayData
  구성 요소에 전달합니다.
• 그런 다음 'DisplayData' 구성 요소는 데이터 형식 지정 및 표시를 위한 비즈니스 논리를 처리합니다.
• 이렇게 하면 MVVM 아키텍처 패턴에 따라 데이터, UI 렌더링 및 비즈니스 로직의 문제가 분리됩니다.

MVVM 아키텍쳐 그 다음은 무엇일까?

• 웹 서비스가 발전하게 되면서 이제는 하나의 Page단위가 아니라 Page안에 여러가지 모듈이 있고 Modal이나 여러 화면들이 하나의 화면에서 구성이 될 수 있도록 발전을 하게 됩니다.
• 그래서 MVVM이 이제 화면단위가 아니라 조금 더 작게 재사용 할 수 있는 단위로 만들어서 조립을 하는 방식으로 발전을 하게 됩니다.
• 이것이 우리는 이미 이제 익숙한 Component 패턴입니다.

출처

https://velog.io/@teo/프론트엔드에서-MV-아키텍쳐란-무엇인가요#프롤로그