Flux 패턴

🌐

Flux 패턴

등장 배경

Flux 패턴?

Flux 패턴

Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, CSR 어플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 데이터 흐름을 일관성 있게 관리하여 예측가능성을 높이기 위해 고안되었다.

등장 배경

기존 어플리케이션이 보편적으로 사용하던 디자인 패턴은 MVC 패턴이었다. MVC는 Model, View, Controller의 약자로, Model에 데이터를 저장하고 Controller를 이용해 Model의 데이터를 관리한다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여지고, 사용자 역시 View를 통해 데이터를 입력하면 Model을 업데이트 할 수 있게 된다. React의 State Hook을 대입해서 생각해보면, Model은 state, Controller는 상태 변경 함수가 된다. View에서는 Controller를 이용해(Lift State Up) Model을 업데이트 할 수 있다.

하지만 이러한 방식은 어플리케이션의 규모가 커지고 이에 따라 Model 역시 많아지며, Model이 여러 View에 데이터를 전달하는 상황이 발생한다. View 역시 여러 Model을 업데이트 해야 하는 경우가 생기고 Model이 업데이트되어 View가 업데이트 되면 그 View가 다시 Model을 업데이트 하는 등 복잡한 데이터 흐름을 가지게 된다. 이렇게 여러 Model과 View가 서로에게 영향을 주는 의존성을 많이 가지게 되면 Model의 갯수가 많아질수록 각 Model에서 발생한 이벤트가 어플리케이션 전체로 퍼져나갈때 이를 예측하기 힘들어진다.

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

Flux 패턴?

Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향 흐름으로 어플리케이션을 만드는 아키텍처이다. 각 요소들은 단방향 흐름에 따라 순서대로 역할을 수행하고, View로부터 새로운 데이터 변경이 생기면 이를 다시 순서대로 실행한다. 이렇게 하면 예외 없이 데이터를 처리할 수 있다.

Action

Action은 데이터를 변경하는 행위로 Dispatcher에게 전달되는 객체이다. Action 객체를 생성하는 Action Creator를 이용해 새로 발생하는 Action의 타입과 새로운 데이터(payload)를 묶어 Dispatcher에게 전달한다.

Dispatcher

Dispatcher는 모든 데이터 흐름을 관리하는 중앙 허브로 볼 수 있다. Store(Model)에는 상태와 Action마다 상태를 변경할 수 있는 메서드가 작성되어 있는데, Action이 Dispatcher로 전달되면 이를 감지하여 Store가 작성해둔 콜백함수를 실행한다.

Store의 데이터를 조작하는 것, 즉 Store에 작성된 상태 변경 메서드는 오직 Dispatcher를 통해서만 가능하다. 또한 Store들 사이에 의존성이 있는 상황에서도 순서에 맞게 콜백함수를 순차적으로 처리하도록 관리한다.

Store (Model)

Store는 상태 저장소로 상태와 상태를 변경할 수 있는 메서드를 가지고 있다. 어떤 타입의 Action이 발생했는지에 따라 그에 맞게 데이터 변경을 수행하는 콜백함수를 Dispatcher에 작성한다. Dispatcher에서 콜백 함수를 실행하여 상태가 변경되면 View에게 데이터가 변경됨을 알린다.

View

View는 리액트 컴포넌트로 생각하면 쉽다. Store에서 View에게 상태가 변경되었음을 알리면 최상위 View(Controller View)는 Store에서 데이터를 가져와 자식 View에게 내려 보내고, 새로운 데이터를 받은 View는 화면을 리렌더링한다. 사용자가 View에 어떤 조작을 하게 되면 그에 해당된 Action을 생성한다.

Uploaded by N2T