MVC VS FLUX VS REDUX

이번 프론트 앤드에서 사용해볼 후보군을 추려봤고 주로 MVC, FLUX, REDUX 아키텍쳐가 쓰인다고 한다.

 

 

 

1. MVC 아키텍쳐

 

 

1.1. MVC 아키텍쳐 개요

 3개의 레이어로 이루어진 아키텍쳐 패턴으로 유저에게서 요청받을때마다 적절한 Model과 View를 활용해 응답한다.

 

• Model: 앱의 데이터 및 동작을 유지, 관리한다.
• View: 모델의 UI를 표기한다.
• Controller: View와 Model 컴포넌트 간의 인터페이스 역할을 담당한다.

 

---

2. FLUX 아키텍쳐

 

 

FLUX Architecture Pattern - https://www.clariontech.com/blog/mvc-vs-flux-vs-redux-the-real-differences

 

2.1. FLUX 개요

2014년경 페이스북의 업데이트를 앞두고 페이스북에서 개발된 아키텍쳐

 

다음과 같은 요소를 포함한다.

 

• Store/Stores: 앱의 state와 로직등을 저장하는 컨테이너
• Action: Dispatcher에게 데이터를 전달하는 기능
• View: MVC 아키텍쳐의 View와 동일하나 내부 내용은 'React'로 작성되어 있다.
• Dispatcher: action을 처리하고 store를 업데이트하는 역할을 맡는다.

 

2.2. FLUX 흐름

1. 유저가 웹에서 뭔가를 클릭

2. 뷰가 액션을 생성

3. 디스패쳐가 액션을 처리 후, 결과를 기반으로 적절한 스토어를 업데이트

4. 스토어의 바뀐 내용을 기반으로 View 업데이트

 

 

---

3. Redux 아키텍쳐

 

 

 

Redux Architecture Pattern - https://www.clariontech.com/blog/mvc-vs-flux-vs-redux-the-real-differences

 

3.1. Redux 개요

• 페이스북이 FLUX를 발표하고 난 뒤, 2015년에 Dan Abramov와 Andrew Clark이 개발한 라이브러리
• FLUX에 기반을 두고 있으나 새로운 Component가 추가됨
• Reducer: 변화를 일으키는 함수, 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아옴
• Centralized Store: 전채 앱에서 '단 하나'의 Store를 가지고 있음

 

3.2. Redux 흐름

1. 액션이 발생하면 Reducer에 의해 Dispatch된다.

2. Reducer가 중앙 store를 업데이트한다.

3. 스토어는 새로운 State를 갱신하고 View를 업데이트하기 위해 전송한다(action)

 

* 앱 이벤트(마우스 클릭 등)가 발생하는 것을 'Action'이라고 한다.

 

---

4. MVC VS FLUX VS REDUX

 

 

• 데이터 흐름은 MVC는 View와 Controller에서 양방향으로 흐르는 것에 비해 Flux와 Redux는 단방향으로 흐른다. 따라서 MVC에 비해 디버그가 쉽고 데이터를 통제하기 간편하다.
• Store같은 경우 MVC는 Store 컨셉이 없다. FLUX는 앱 내에 여러개의 스토어를 가지고 Redux는 앱 전체에서 단 하나의 스토어를 가진다.
• 비즈니스 로직은 MVC같은 경우 Controller가 비즈니스 로직을 통제하고, FLUX는 스토어가 REDUX는 Reducer가 비즈니스 로직을 통제한다.

 

---

 

Reference

https://www.clariontech.com/blog/mvc-vs-flux-vs-redux-the-real-differences

MVC vs Flux vs Redux – The Real Differences