Flux Pattern

🔖 Before start

면접에서 Redux 디자인 패턴에 대한 질문이 나왔다. Redux를 사용해 본 경험이 있고, 어떤 식으로 동작하는지 알고 있지만 정확하게 설명하지 못해 이상한 말만 늘어 놓고 나왔다.
면접은 항상 떨리지만 부족한 부분을 확실히 깨닫게한다. 공부할거리가 생겨 재밌기도 하다.
리덕스 디자인 패턴인 Flux 패턴과 Flux 패턴의 등장 배경에 대해 알아보자.

---

1. MVC Pattern

Flux Pattern을 이해하기 위해서 우선 MVC Pattern을 알아야 한다.

MVC Pattern은 Model ,View, Controller로 이루어져있다.

구성	역할
Model	데이터를 관리한다
View	사용자에게 보여지는 UI를 관리한다
Controller	Model과 View 사이에서 필요한 작업을 수행한다

사용자가 View에서 Action을 발생시키면 Controller는 이를 감지해 필요한 작업을 수행한다.

1️⃣ 데이터 변경이 없는 경우 View만 업데이트 한다.
2️⃣ 데이터 변경이 있는 경우 Model을 업데이트 하고 View에게 알려 화면을 업데이트 한다.

🚨 MVC Pattern은 사실상 백엔드에 적합한 디자인 패턴이다.

1. 클라이언트의 요청을 받는다.
2. 요청에 대한 작업을 처리한다.
3. 데이터를 가공하거나 수집한다.
4. 클라이언트에게 줄 웹페이지, 즉 View를 생성하고 응답한다.

SPA 같은 경우 MVC Pattern으로 동작한다고 생각할 수 있다. 사용자가 입력한 URL에 따라 해당 URL을 분석해 알맞은 페이지를 렌더링하기 때문이다. 그런데 MVC Pattern을 프론트 아키텍쳐로 적용하기엔 분명한 한계점이 존재한다.

2. 프론트엔드에서의 MVC Pattern의 한계

프론트엔드에서는 MVC Pattern을 적용하기란 쉽지 않아졌는데, 이전과 달리 View가 매우 복잡해졌으며, 그에 따라 사용자와의 상호작용이 빈번하게 발생하기 때문이다.

사실 프론트엔드는 그 자체가 View라고 할 수 있다. 다양한 이벤트를 처리해야하는 과정에서 View가 곧 Controller와 같은 역할을 할 수밖에 없는 상황이 생겨났고, 이 때문에 Model과 View 사이 의존성이 매우 커졌다.

1. 사용자 입력 값 관리
2. 이벤트를 감지해 화면 업데이트
3. setTimeout을 사용한 스케줄 관리
4. 서버와 통신

etc...

MVC Pattern은 프론트엔드에서 View와 Model의 관계를 매우 복잡하게 만든다.

1️⃣ View의 변경으로 Model을 바꿔야 하는 경우

• 사용자 입력 값이 변경했을 경우

2️⃣ Model의 변경으로 View를 바꿔야 하는 경우

• 서버로부터 받은 데이터 변경
• 주기적으로 어떤 데이터가 생성되거나 변경되었을 때

사용자 입력이 있을 때 뷰가 여러 모델을 변경하고, 변경된 모델은 또 다른 모델을 변경해야 하는 경우가 있다. 심지어 변경된 모델이 다시 여러 뷰에 반영되어야 하는 경우도 있다. 이러한 현상은 데이터 흐름을 추적하기 어렵게 만들고 애플리케이션이 어떻게 동작하는지 예측하기 어렵다는 치명적인 단점을 발생시킨다.

프론트엔드는 이러한 MVC Pattern의 한계를 극복하고자 MVVM Pattern, Flux Pattern 등과 같은 다양한 기술을 도입한다. 그 중 페이스북에서 발표한 Flux Pattern에 대해 알아보자.

3. Flux Pattern

페이스북에서는 예측 가능성을 높이기 위해 데이터가 단방향으로 흐르는 Flux 아키텍쳐를 발표했다.

Action

• 사용자 입력이나 서버 데이터 변경 등이 발생했을 때 생성되는 객체다.
• Action type과 새로운 데이터 payload를 Dispatcher에 전달한다.

Dispatcher

• 데이터의 흐름을 관리한다. Action의 type에 맞는 작업을 수행한다.
• 작업은 Store의 데이터를 조작하는 것을 말하며, Store에 정의된 콜백 함수를 실행한다.
• Dispatcher 통해서만 Store 데이터를 조작할 수 있다.

Store (Model)

• 데이터 저장소로, 데이터와 데이터를 조작할 수 있는 함수를 가지고 있다.
• Dispatcher에 데이터를 조작할 수 있는 함수를 등록한다.
• 데이터가 변경되면 View에 알린다.

View

• 사용자에게 보여지는 컴포넌트다.
• 사용자 입력이 발생하면 Action을 생성한다.
• Store가 데이터 변경을 알리면 데이터를 가져와 화면을 재렌더링 한다.

Redux, Recoil 과 같은 리액트 상태 관리 라이브러리는 이러한 Flux Pattern을 기반으로 만들어졌다. Store의 데이터가 바뀌면 그 변경 사항을 View에 반영하도록 해 데이터 흐름을 추적하기 훨씬 용이해졌고 안정적으로 데이터를 관리할 수 있다.

---

참고

Mozilla MVC
프론트엔드에서 MVC보다 더 많이 쓰이는 패턴은?
A cartoon guide to Flux