[React] Redux Flux 패턴 vs MVC 패턴

hansoom·2024년 9월 11일

목록 보기

1/2

Redux Flux 패턴과 MVC 패턴 비교

MVC는 Model, View, Controller의 약자이다.
사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고, 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달하게 된다.

💦 이때, MVC에서 애플리케이션이 복잡해질 수록 양방향 데이터 흐름이 복잡해지고 버그가 많이 발생하게 된다!!

애플리케이션이 복잡해질수록, View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고, Model 역시 여러 개의 View에 데이터를 전달하는 상황이 발생한다.

한 Model이 업데이트되면 그에 따라 View가 업데이트되고, 업데이트된 View가 또 다른 Model을 업데이트하는 식의 복잡한 데이터 흐름을 가지게 된다.

이렇게 많은 의존성을 가지면 Model의 개수가 많아질수록 각 Model에서 발생하는 이벤트가 애플리케이션 전체로 퍼져나갈 때 이를 예측하기 힘들어진다.

페이스북은 "MVC는 정말 눈 깜짝할 사이에 복잡해진다"고 말하며 이문제의 해결 방안으로 단방향 데이터 흐름을 가지는 Flux 패턴을 고안해냈습니다.

Flux 패턴의 등장은 대규모 애플리케이션에서 데이터 흐름을 일관성있게 관리함으로써 프로그램의 예측 가능성을 높이기 위함이었다.

Flux는 사용자 입력을 기반으로 Action을 만들고, Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경하는 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처이다.

이런 단방향 데이터 흐름은 데이터 변화를 훨씬 예측하기 쉽게 해준다!

데이터가 담겨있는 객체(Action)을 Dispatcher로 전달한다.
여기서 Dispatcher 는 데이터의 흐름을 관리하는 허브의 역할이다.

Action이 발생되면 Dispatcher로 전달되며,

Action에 따라 등록된 콜백함수를 실행하여 Store에 전달한다.

Store는 애플리케이션의 모든 상태와 관련 로직을 가지고 있다.

Store의 변경 상황을 View에 알려준다.

Flux의 View는 화면에 나타내는 것 뿐만 아니라, 자식의 View로 데이터를 흘려보내는 View Controller 역할도 같이한다.

애플리케이션 내부에 대해서는 아는 것이 없지만, 받은 데이터를 처리하여 사람들에게 보여주기 위한 일을 한다.

View에서 변경하고 싶을 때에는 Action 생성자를 호출한다.

=> 요약하면, action은 disaptcher를 통해 store의 상태를 갱신합니다. store가 업데이트 된 후, 상태가 변경되었다는 이벤트를 중계하는 과정으로 view에게 새로운 상태를 보내주고 view 스스로 업데이트하게 만듭니다.