Flux 구조란? 리액트는 Flux구조인가?

Flux란?

An application architecture for React utilizing a unidirectional data flow.
단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍처

 

Flux아키텍쳐는 Meta(전 Facebook)에서 개발한 단방향 데이터 흐름을 가지는 아키텍쳐이다.

MVC구조를 개선하기 위해 만들어졌다.

 

그 전에 MVC란? (복습)

먼저 MVC구조를 보자면

 

이와 같은 구조를 가지는데 Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 하고,

Model은 이런 데이터를 View를 통해 반영한다. 또, View는 사용자로부터 데이터를 입력받기도 하기 때문에

사용자의 입력이 Model에 영향을 주기도 한다.

 

문제는 이러한 구조가 거대한 어플리케이션을 대상으로 한 프로젝트에서는 너무 복잡하고 빨라진다는 것이다.

 

문제점

MVC의 근본적인 문제에 대해 설명하자면 사용자와의 상호작용이 View에서 일어났기 때문에 사용자의 입력에 따라 Model을 업데이트 해줘야 하는 경우가 있고 여기서 의존성의 이유로 하나의 모델만이 아닌 다른 모델까지 업데이트 해야할 때가 발생한다는 것이다.

이러한 문제 때문에 아주 많은 변경을 초래하여 결과를 예상치 못하게 되는 상황도 나올 수 있었다.

 

(옛날 술게임 the game of Death를 엄청 여럿이 해서 마지막 사람이 누가 될 것인가? 와 비슷한건가ㅋㅋ)

 

 

해결방법

Facebook 개발진들은 이에 대한 해결책으로 단방향 데이터 흐름을 채택했다.

단방향 데이터 흐름을 가지는 구조는 데이터는 단방향으로만 흐르고, 새로운 데이터를 넣으면 처음부터

다시 시작되는 방식으로 설계되어 있다. 이러한 시스템 구성을 FLUX 구조라 불렀다.

 

데이터 흐름은 디스패처 -> 스토어 -> 뷰 순서이며, 뷰에서 입력이 발생하면 액션을 통해서 디스패쳐로 향하게 된다.

 

 

Dispatcher

- 디스패쳐는 Flux 어플리케이션의 모든 데이터 흐름을 관리하는 일종의 허브 역할이다.

- 액션을 받아서 등록된 모든 스토어(Store)에 액션을 전파한다.

- 단방향 데이터 흐름을 유지하기 위해 액션과 스토어 간의 통신을 조정한다.

- 여러 개의 스토어에서 발생한 변경 사항을 한 번에 처리하여 뷰에게 알립니다.

 

Action

- 애플리케이션에서 발생하는 이벤트나 사용자의 입력을 나타냅니다.

- 사용자의 상호작용에 의해 생성되거나, 외부 데이터 소스로부터 받아온 데이터 등의 변화에 대한 메시지이다.

- 디스패처에 의해 스토어로 전달되어 상태 변경을 트리거한다.

ex: dispath(action(...)) 이런 식의 꼴로 많이 활용된다.

 

 

Store

- 애플리케이션의 상태를 관리하고, 비즈니스 로직을 처리한다.

- 애플리케이션의 데이터를 저장하고 변경 사항을 추적한다.

- 액션을 수신하여 상태를 변경하고, 변경 사항을 관련된 뷰에게 알린다.

- 여러 개의 스토어가 있을 수 있을 수 있으며, 각각의 스토어는 특정한 도메인의 데이터를 관리한다.

 

 

View

- 사용자에게 보여지는 UI를 나타냅니다.

- 스토어에서 상태를 가져와서 UI를 업데이트하고, 사용자의 입력에 따라 액션을 생성하여 디스패처에 전달

- 스토어로부터 상태 변경 사항을 구독하고, 변경이 발생하면 UI를 업데이트합니다.

- 여러 개의 컴포넌트로 구성될 수 있으며, 각각의 컴포넌트는 특정한 부분의 UI를 담당한다.

 

 

 

리액트는 Flux구조인가?

리액트를 Flux구조라고 말하는 사람들이 많은데 엄밀하게 말하자면 Flux구조와 흡사하다 정도로만 말할 수 있다.

실제 정확히 Flux구조인건 일부 리액트 애플리케이션들인데, 주로 Redux와 zustand가 있다.