디자인 패턴의 종류: MVC, MVP, MVVM

MVC 패턴(Model–View–Controller)

MVC는 프로그램을 Model, View, Controller 세 역할로 나눠서 화면 로직과 비즈니스 로직을 분리하는 구조.
유지보수성과 확장성을 높이기 위해 사용.

MVC 구성 요소

1) Model

• 데이터와 비즈니스 로직 담당
• DB 접근, 상태 관리, 규칙 처리 등 핵심 로직 포함
• View와 직접 연결되지 않음

// playlistModel.js
class PlaylistModel {
  async getSongs(userId) {
    return db.query("SELECT * FROM Songs WHERE userId = ?", [userId]);
  }

  async addSong(userId, song) {
    return db.insert("Songs", { userId, ...song });
  }
}

module.exports = new PlaylistModel();

2) View

• 화면을 그리는 역할(UI)
• 데이터를 화면에 어떻게 보여줄지만 알고 있음
• 로직이나 판단 기능은 거의 없음

class PlaylistView extends React.Component {
  state = { songs: [] };

  componentDidMount() {
    fetch(`/playlist/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ songs: data }));
  }

  render() {
    return (
      <div>
        <h1>My Playlist</h1>
        <ul>
          {this.state.songs.map(song => (
            <li key={song.id}>{song.title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

3) Controller

• 사용자 입력(요청)을 받아 Model을 호출
• 처리된 데이터를 View에 전달
• View와 Model의 중간 관리자

// playlistController.js
const PlaylistModel = require("./playlistModel");

exports.getUserPlaylist = async (req, res) => {
  const songs = await PlaylistModel.getSongs(req.params.userId);
  res.json(songs);
};

---

MVP 패턴(Model–View–Presenter)

MVP는 MVC에서 발전한 패턴으로, View와 Model 사이에 Presenter가 존재하는 구조.
View가 모든 로직을 Presenter에게 위임한다는게 핵심.

MVP 구성 요소

1) Model

• DB / 데이터 / 비즈니스 로직 담당
• 구조는 MVC의 Model과 동일

2) View

• UI 표시만 담당
• 사용자 입력을 Presenter에게 전달
• 스스로 판단하거나 Model에 접근하지 않음
• View는 Presenter 없이는 아무 것도 못 한다!

3) Presenter

• View의 모든 이벤트를 처리
• Model에서 데이터 가져와 가공 후 View에 전달
• View와 Model 모두 알고 있음 (양방향 연결)

 

✔️ MVC 구조

View: 버튼 클릭 → Controller 호출
Controller: Model에게 데이터 요청
Model: DB에서 댓글 조회
Controller → View: 댓글 데이터 반환
View: 렌더링

✔️ MVP 구조

View: 클릭 이벤트만 Presenter에게 전달
Presenter: Model에 요청 + 데이터 가공
Model: 댓글 데이터 반환
Presenter → View: 가공된 데이터 렌더링

---

MVVM 패턴(Model–View–ViewModel)

MVVM은 MVC, MVP 이후 등장한 UI 아키텍처 패턴.

MVC의 C가 뷰 모델(View Model)로 바뀐 패턴.

UI(View)와 상태/로직(ViewModel)을 완전히 분리하는 것이 목적.

MVP 구성 요소

1) Model

• DB / 데이터 / 비즈니스 로직 담당
• MVP/MVC와 동일
• View와 직접 연결되지 않고 ViewModel을 통해 접근

2) View

• UI 표시만 담당
• 로직 없음
• ViewModel을 “참조만” 하며, ViewModel의 상태만 반영해 화면을 그림

3) ViewModel

• view가 필요로 하는 화면 상태 관리 + 데이터 로직
• Model에서 데이터를 가져오고 가공
• View와 Model 사이에서 중간 역할
• View는 ViewModel을 그대로 렌더링만.
• ViewModel은 View를 직접 모르고, View도 Model을 전혀 모름
  

// songViewModel.js
class SongViewModel {
  constructor(model) {
    this.model = model;
    this.state = {
      keyword: "",
      result: [],
      loading: false
    };
  }

  async searchSongs(keyword) {
    this.state.keyword = keyword;
    this.state.loading = true;

    const data = await this.model.search(keyword);

    this.state.result = data;
    this.state.loading = false;

    return this.state; // View는 이 상태를 받아 렌더한다
  }
}

export default SongViewModel;