Flux 패턴과 MVC 패턴?

in Study / about React

Flux패턴과 MVC패턴에 대해서 공부하고 기록합니다.

소프트웨어 개발에서 아키텍처 패턴은 애플리케이션의 구조와 설계를 결정하는 중요한 요소입니다.

이러한 패턴들은 코드를 체계적으로 조직화하고, 유지보수성과 확장성을 향상시키는 데 도움을 줍니다.

그중에서도 Flux 패턴과 MVC 패턴은 각각의 특징과 장단점으로 인해 널리 사용되는 두 가지 주요 아키텍처 패턴입니다.

이 글에서는 Flux와 MVC 패턴의 개념과 그 차이점을 살펴보고, 각 패턴이 어떤 상황에서 더 적합한지 알아보겠습니다.


Flux부터 알아봅시다

Flux는 단방향 데이터 흐름을 강조하는 아키텍처 패턴으로, Facebook에서 React 애플리케이션의 복잡한 상태 관리를 위해 개발되었습니다.

Flux는 상태 관리가 복잡해질수록 데이터 흐름을 예측 가능하게 하고, 버그 발생을 줄이며, 디버깅을 쉽게 해줍니다.

Flux의 구성 요소

  1. Action: 사용자의 입력이나 시스템의 이벤트를 나타내는 객체로, 데이터와 함께 특정 작업을 지시합니다.
  2. Dispatcher: 액션을 받아서 등록된 모든 스토어에 전달하는 역할을 합니다. 단일 디스패처가 있어 중앙 집중화된 데이터 흐름을 관리합니다.
  3. Store: 애플리케이션의 상태와 비즈니스 로직을 보유합니다. 스토어는 디스패처로부터 액션을 받아 상태를 업데이트하고, 변화된 상태를 뷰에 전달합니다.
  4. View: 사용자 인터페이스를 담당하며, 스토어에서 상태가 변경될 때마다 이를 반영하여 UI를 업데이트합니다.
  5. Action Creator: 액션 객체를 생성하는 함수로, 사용자 인터페이스에서 발생한 이벤트를 액션으로 변환합니다.


Flux는 이 모든 요소들이 하나의 방향으로 데이터를 전달하며, 이로 인해 애플리케이션의 상태 변화를 예측하고 관리하기가 쉽습니다.

// 간단한 Flux 패턴 예시
const ActionTypes = {
  ADD_TODO: "ADD_TODO",
};

const Dispatcher = new Flux.Dispatcher();

const TodoStore = {
  todos: [],
  addTodo: function (todo) {
    this.todos.push(todo);
  },
  getAll: function () {
    return this.todos;
  },
};

Dispatcher.register((action) => {
  switch (action.type) {
    case ActionTypes.ADD_TODO:
      TodoStore.addTodo(action.todo);
      break;
    default:
    // no-op
  }
});

function addTodoAction(todo) {
  Dispatcher.dispatch({
    type: ActionTypes.ADD_TODO,
    todo: todo,
  });
}

위 예시는 간단한 할 일(TODO) 리스트를 관리하는 Flux 패턴의 예시입니다.

액션은 디스패처를 통해 스토어에 전달되고, 스토어는 상태를 업데이트하며, 뷰는 업데이트된 상태를 표시합니다.

Flux의 장점

  • 단방향 데이터 흐름: 상태 변화를 쉽게 추적할 수 있어, 디버깅과 유지보수가 용이합니다.
  • 모듈화: 애플리케이션의 각 부분을 독립적으로 모듈화할 수 있습니다.
  • 예측 가능성: 데이터가 한 방향으로만 흐르므로, 상태 변화가 예측 가능하고 복잡한 애플리케이션에서도 안정적입니다.


MVC 패턴도 알아봅시다

MVC 패턴은 오랜 시간 동안 소프트웨어 개발에서 사용되어 온 아키텍처 패턴으로, 모델(Model), 뷰(View), 컨트롤러(Controller)라는 세 가지 주요 구성 요소로 나뉩니다.

이 패턴은 UI 애플리케이션에서 사용자 인터페이스와 비즈니스 로직을 분리하기 위해 고안되었습니다.

MVC의 구성 요소

  1. Model: 애플리케이션의 데이터와 비즈니스 로직을 담당합니다. 모델은 데이터의 상태를 관리하고, 데이터를 생성, 수정, 삭제하는 역할을 합니다.
  2. View: 사용자에게 보여지는 부분으로, 모델의 데이터를 바탕으로 UI를 구성하고 사용자 입력을 받습니다.
  3. Controller: 사용자 입력을 처리하고, 이를 모델에 전달하여 상태를 변경하거나 모델로부터 데이터를 받아 뷰를 업데이트합니다.


MVC 패턴에서는 컨트롤러가 중간에서 뷰와 모델 간의 데이터를 전달하며, 이로 인해 각 구성 요소가 독립적으로 변화할 수 있습니다.

// 간단한 MVC 패턴 예시
class Model {
  constructor() {
    this.data = [];
  }

  addItem(item) {
    this.data.push(item);
    return this.data;
  }
}

class View {
  render(data) {
    console.log("View rendering data:", data);
  }
}

class Controller {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  addItem(item) {
    const updatedData = this.model.addItem(item);
    this.view.render(updatedData);
  }
}

const model = new Model();
const view = new View();
const controller = new Controller(model, view);

controller.addItem("New item");

위 예시는 MVC 패턴을 따르는 간단한 애플리케이션입니다.

사용자가 입력한 데이터가 컨트롤러를 통해 모델에 전달되고, 모델은 상태를 업데이트한 후 뷰가 이를 렌더링합니다.

MVC의 장점

  • 유연성: 모델, 뷰, 컨트롤러가 독립적으로 작동할 수 있어 각 부분을 쉽게 교체하거나 수정할 수 있습니다.
  • 재사용성: 뷰와 모델의 분리로 인해 코드의 재사용성이 높아집니다.
  • 테스트 용이성: 비즈니스 로직과 UI가 분리되어 있어, 개별적으로 테스트가 가능합니다.


정리

두 패턴의 차이점을 간단히 요약하자면, Flux는 단방향 데이터 흐름을 강조하는 반면, MVC는 양방향 또는 분산된 데이터 흐름을 특징으로 합니다.