React 개발을 위한 Flux 패턴이란?

리액트는 2011년 페이스북(현 meta)에서 선보인 SPA 라이브러리이다.

각종 사용자 인터렉션을 실시간으로 처리해야하는 페이스북과 같은 소셜 웹에서 UX를 개선하고 실시간성을 보장하기 위해 페이스북에서는 React 라이브러리를 개발하기 시작하였다.

React를 통한 개발을 할 때 기존 MVC 패턴을 통한 개발은 어려움을 주었고 이때 등장한 패턴이 Flux 패턴이다.

기존 MVC 패턴과 비교하며 Flux 패턴의 이점에 대하여 알아보겠다.

 

MVC 패턴

MVC 패턴은 Model-View-Controller의 줄임말로 Model, View, Contoller 각각의 개념을 역할로 나누어 작업을 처리하는 개발 디자인 패턴이다.

 

각각의 역할은 다음과 같다

 

Model

어플리케이션에서 보여줄 모든 데이터, 정보를 나타낸다.

Model을 구성함에 있어서 다음과 같은 규칙 준수가 요구된다

1. 변경하는 모든 데이터를 가지고 있어야한다.
2. 뷰, 컨트롤러에 대한 내용을 알지 말아야한다.
3. 변경이 일어났을 때 변경이 일어났음을 알려야한다.

 

View

사용자 눈으로 보이는 UI요소를 나타나낸다.

View를 구성함에 있어서 다음과 같은 규칙 준수가 요구된다.

1. 모델에 대한 정보를 따로 저장할 수 없다.
2. 뷰 외 다른 구성요소를 알 수 없다.
3. 변경이 일어났을 때 변경이 일어났음을 알려야한다.

 

Contoller

데이터와 UI 요소 사이에 이벤트를 처리하기 위한 역할이다.

Contoller 역시 다음과 같은 규칙 준수가 요구된다.

1. 모델, 뷰의 존재를 알아야한다.
2. 모델, 뷰의 변경상태를 알아야한다.

 

 

MVC 패턴의 장점은 다음과 같다.

 

1. 책임의 분리

개발을 하는데 있어서 모델, 뷰, 컨트롤러 라는 책임을 분산하였다.

모델은 데이터와 비즈니스 로직을 관리하며, 뷰는 UI, 컨트롤러는 사용자 입력을 처리하여 모델과 뷰를 업데이트한다.

이런 책임의 분산은 코드의 유지보수성과 재사용성에 향상을 불러온다.

 

2. 유연성

각 구성요소가 독립적으로 작동하기 때문에 한가지 부분을 수정할 때 다른 부분을 수정하지 않아도 되는 유연성이 있다.

 

3. 테스트 용의

각 구성요소별 테스트가 가능하다. 

 

위와 같은 이점이 있는 MVC 패턴이 문제가 되었던 부분은 무엇일까?

 

다음 MVC 패턴의 예시를 보자.

- User가 Controller를 통해 Model에서 데이터를 가져오며, 가져온 데이터를 통해 View에서 UI를 제어할 수 있다.
- User가 View를 통해 데이터를 변경하면 모델로 이동하여 반영된다. 이후 변경된 모델은 view에 적용된다.

 

데이터, 즉 모델을 변경시킬 수 있는 두가지 방법이다.

 

이런 데이터의 양방향 흐름은 간단한 어플리케이션에서는 좋은 패턴이 될 수 있으나, 프로젝트 규모가 커질수록 복잡해지는 상태관리 및 디버깅을 하는데 어려움을 준다. 

양방향성으로 인한 문제 [https://www.tcpschool.com/react/react_redux_intro]

 

이러한 양방향성 흐름의 문제를 해결하기 위해 등장한 패턴이 Flux 패턴이다.

---

Flux 패턴

2014년 페이스북에서 발표한 개발 아키텍처이다.

 

Flux는 다음 요소들로 구성된다.

 

Action

사용자 입력이나 이벤트를 나타낸다.

 

Store

어플리케이션의 상태를 보유한다.

 

Dispatcher

Action을 받아서 중앙 Store에 전달하는 역할을 한다. (중앙집중식)

 

View

사용자에게 정보를 표시하고 사용자 입력을 받는 역할 (UI)

 

위 구성요소를 이용한 데이터 흐름은 다음과 같다.

Flux 패턴의 데이터 구조 [https://www.tcpschool.com/react/react_redux_intro]

 

View에서 사용자가 이벤트를 발생시키면  dispatcher를 통해 이벤트 정보가 담긴 action이 store에 접근하고 변경된 상태에 대한 결과가 view에 반영된다.

 

이러한 패턴은 단방향 데이터 흐름을 가지고 있어 데이터의 흐름을 예측이가능하며, 상태 추적에 도움을 주며, 각 구성요소가 엄격히 분리되어 있어 복잡성과 유지 보수성이 향상된다.

 

Flux 패턴은 추후 Redux, MobX 등 여러 상태관리 라이브러리에 적용되었으며, 나아가 zustand, recoil, jotai 등 많이 사용되는 상태관리 라이브러리에 큰 영향을 주었다.