Flux 패턴

React의 Flux 패턴에 대해 알아보았다.

 

MVC 패턴

MVC

MVC는 Model, View, Controller의 약자입니다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여집니다. 사용자가 View를 통해 데이터를 입력하면, Controller가 그 입력을 처리해 Model을 업데이트할 수 있습니다. 이 구조에서는 데이터 흐름이 양방향으로 일어날 수 있습니다.

 

문제는 애플리케이션의 규모가 커지면 아래와 같이 복잡해집니다.

View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View에 데이터를 전달하는 상황이 발생합니다. 규모가 커질수록 많은 의존성 문제와 복잡한 데이터 흐름이 발생하여 코드가 예측 불가능하게 되고, 이는 버그의 원인이 됩니다.

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

 

Flux 패턴

Flux 패턴은 페이스북(현 메타)이 MVC 패턴의 단점을 보완하기 위해 발표한 애플리케이션 아키텍처입니다. 이 패턴은 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리하여 프로그램의 예측 가능성을 높이는 데 목적을 두고 있습니다.

 

Flux 패턴은 단방향 데이터 흐름을 유지하는 아키텍처 디자인 패턴입니다. 사용자의 입력을 기반으로 Action이 생성되고, 그 Action은 Dispatcher를 통해 Store에 전달되어 상태가 변경됩니다. 이 변경 사항은 다시 View에 반영됩니다.

 

Flux 패턴의 각 요소들

Action

• 애플리케이션에서 발생하는 이벤트 또는 사용자의 상호작용을 나타내는 객체입니다. 
• Action creator는 새로운 action을 생성하여, type과 payload(필요한 데이터)를 묶어 Dispatcher에 전달합니다.

Dispatcher

• 모든 데이터의 흐름을 관리하는 중앙 허브 역할을 담당합니다.
• Action이 발생하면 Dispatcher는 전달된 Action을 확인하고 등록된 콜백함수를 실행하여 Store로 전달한다.
• Store의 데이터를 조작하는 것은 오직 Dispatcher만 가능하다.
• Dispatcher는 단 하나만 존재하며, 애플리케이션에서 발생하는 모든 액션을 처리합니다.

Store

• 애플리케이션의 로직, 상태를 담고 있습니다.
• React에서 우리는 이 Store를 Dispatcher와 연결해 Store에 접근할 수 있도록 callback 명령을 제공할 수 있습니다.  즉 action은 dispatcher를 통해 store의 상태를 갱신합니다.
• Store의 state 변경이 완료되면 변경된 상태를 View에 전달합니다.

View

• View는 리액트 컴포넌트로 생각하면 됩니다.
• Flux의 View는 MVC 패턴의 View와 달리, Store에서 직접 데이터를 가져와서 화면을 그리는 동시에 자식 컴포넌트에 데이터를 전달하는 Controller-View 역할을 합니다.
• Store에서 상태가 변경되면 View는 이를 감지하고, 상태를 다시 가져와 화면을 업데이트합니다. 
• View에서 사용자의 상호작용이 발생하면 새로운 Action을 생성하여 Dispatcher에 전달합니다.

 

Flux 패턴과 Redux

Redux는 Flux 아키텍처 디자인 패턴을 기반으로 한 라이브러리입니다. Flux와 유사한 Redux 패턴은 Flux 패턴을 간소화한 형태입니다. Redux에서는 여러 개의 Store 대신, 단일 Store에서 애플리케이션의 모든 상태를 관리합니다. 이 단일 Store의 개념은 상태 관리와 디버깅을 더욱 쉽게 만들어 줍니다.