JS로 MVVM을 구현하기

3/29/2025, 3:54:11 PM



plain old javascript object - MVVM

Model

Model은 데이터입니다.

데이터는 프로그래밍 언어를 통해 가공되거나, 화면에 출력되는 대상입니다.

아래와 같이 model을 정의할 수 있습니다.

const model = {
    _title: "jurassic park",
};

View

요즘은 다양한 클라이언트들이 존재합니다. 화면에 렌더링하는 방식 중 하나인 html을 예시로 들겠습니다.

 <input id="titleInput" />
  <p id="output"></p>
  <button id="changeTitle">JS로 이름 바꾸기</button>

이런 식으로 표현할 수 있습니다.

ViewModel

MVVM의 핵심인 ViewModel입니다.

ViewModel은 서로 독립된 View와 Model을 연결합니다. Model과 View에 접근할 수 있는 것은 코드단에서 이루어지므로 javascript를 이용해야합니다.

아래와 같이 표현할 수 있습니다.

  • model에 getter, setter를 추가합니다.
const model = {
    _title: "jurassic park",
    
    get title() {
        return this._title;
    },
    set title(value) {
        this._title = value;     
    }
};

getter, setter만으로는 아직 ViewModel이라 할 수 없습니다.

ViewModel의 핵심은 두 가지 기능입니다.

  • Model에 의해 View를 변경시킨다.
  • View에 의해 Model을 변경시킨다.

Model에 의해 View를 변경하기

setter에 View를 변경하는 코드를 추가함으로써, Model이 변경됨에 따라 View가 자동으로 변경되도록 합니다.

    // ...
    get title() {
        return this._title;
    },
    set title(value) {
        this._title = value;     
        
        // Model이 바뀌면 UI를 갱신
        document.getElementById("titleInput").value = value;
        document.getElementById("output").textContent = `title: ${value}`;
    }

View에 의해 Model을 변경하기

View에 의한 Model의 변경은 아래와 같이 View에 추가되어 있는 user input을 통해 값을 받습니다.

전체 흐름은 아래와 같습니다.

  1. View를 통해 외부로 부터 값을 받는다. (유저의 입력, 환경변수 등…)
  2. 받은 값을 Model의 setter에 넘긴다.
  3. setter는 이를 다시 View에 반영한다.

아래와 같이 View의 이벤트에 Model을 업데이트 해주는 코드를 작성해주면, 다시 View까지 업데이트 내용이 전파됩니다.

 document.getElementById("titleInput").addEventListener("input", (e) => {
      model.title = e.target.value; // ViewModel을 통해 Model 갱신 → View도 반영됨
    });

결국 최종적으로 반영되는 대상은 View입니다.

간단하게 MVVM에 대해 알아봤습니다.

소프트웨어 개발에서 개념의 분리는 매우 중요합니다.

View와 Model을 완전히 분리할 수 있고, ViewModel이 둘을 이어주는 책임을 가진다는 점에서 좋다고 생각합니다.

android나 iOS 같은 플랫폼에서도 MVVM 아키텍처가 널리 사용 되고 있습니다.

명확한 아키텍처가 없다면 매번 새로운 독특한 코드를 작성하게 됩니다…

이처럼 단순한 구조라도 명확한 아키텍처를 도입하게 된다면, 유지보수와 재사용성이 크게 향상됩니다.