MVC, MVVM, Flux 패턴

 

MVC, MVVM, Flux

---

🔎MVC(Model-View-Controller)

구성요소

• Model: 데이터 및 비즈니스 로직 담당
• View: UI를 담당
• Controller: 사용자 입력을 받아 Model을 update하고, View를 갱신한다.

작동방식

1. controller를 통해 사용자 입력(action)을 받는다.
2. controller는 action에 따라 model을 update한다.
3. controller는 model을 나타낼 view를 선택한다.
4. view는 model을 이용하여 화면을 갱신한다.

특징

• view는 controller와 상호작용하며, controller는 model을 update하고 view를 갱신한다.

 

🔎MVVM(Model-View-View Model)

구성요소

• Model: 데이터 및 비즈니스 로직을 담당
• View: UI를 담당
• View Model: View와 View Model 간의 데이터 바인딩을 통해서 양방향 데이터 흐름을 유지

작동방식

1. View를 통해서 사용자 입력(action)을 입력받는다.
2. View에 action이 들어오면 Command 패턴으로 View Model에 action이 전달된다.
3. View Model은 model에 데이터를 요청하고 응답받는다.
4. View는 View Model과 데이터 바인딩을 통해 화면을 나타낸다.

특징

• Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되어 있다.
  • Command 패턴이란? 객체의 행위를 캡슐화하여 호출자와 행위 수행자를 분리하는 디자인 패턴으로, MVVM에서 커맨드 패턴은 사용자의 입력(action)을 ViewModel에 전달하여 적절한 작업을 수행하도록 하는 것이다. 
    view-model

    // app.js
    new Vue({
        el: '#app',
        data: {
            message: '' // 이 부분이 Model입니다.
        },
        methods: {
            onButtonClick() {
                this.message = 'Button Clicked!'; // Model의 데이터를 변경하는 로직입니다.
            }
        }
    });

     
  • Vue.js 등이 해당된다.

// app.js
new Vue({
    el: '#app',
    data: {
        message: '' // 이 부분이 Model입니다.
    },
    methods: {
        onButtonClick() {
            this.message = 'Button Clicked!'; // Model의 데이터를 변경하는 로직입니다.
        }
    }
});

 

*v-model

- 양방향 바인딩: v-model은 양방향 데이터 바인딩을 제공한다. 즉, View에 action이 입력되면 Model에 자동으로 업데이트되며, 반대로 Model의 값이 변경되면 View에도 즉시 반영된다.

*Vue와 React의 차이

- Vue는 v-model을 통해 input 등의 사용자 입력 요소와 데이터 속성을 쉽게 연결할 수 있고, 데이터와 화면이 자동으로 동기화된다.

- React는 단방향 데이터 흐름을 따르기 때문에, 데이터를 업데이트하기 위해서는 항상 명시적으로 상태를 변경해야 한다.

 

[디자인패턴] MVC, MVP, MVVM 비교 (tistory.com)

[디자인패턴] MVC, MVP, MVVM 비교

 

🔎Flux 패턴

대규모 애플리케이션에서 데이터의 흐름을 일관성 있게 처리하기 위한 패턴이다. 기존의 애플리케이션에서 많이 사용하던 MVC 패턴과 비교하면 View에서 사용자가 데이터를 조작하면 이는 Model에도 반영되어 데이터가 양방향으로 흐르는 문제가 있었다.

Flux 패턴에서는 사용자 입력(action)은 dispatcher에 전달되고, dispatcher는 store(model)을 변경한 뒤, 이는 view에 반영됨으로써 일방향 데이터 흐름을 가지게 된다.

 

 

https://velog.io/@andy0011/Flux-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80

Flux 패턴이란?