Flux 패턴이란?

Flux 패턴은 데이터의 흐름과 관련해 상태 관리 개선을 위해 고안된 아키텍처 관련 패턴이다. 상태의 단방향 흐름이 특징으로, 4가지 요소로 이루어진다:

• Action: 앱에서 발생하는 모든 이벤트를 뜻한다. 유저 입력이나 서버 응답 등 모든 데이터 변화는 Action을 통해 표현된다.
• Dispatcher: Action을 Store로 전달하는 역할을 한다. 각 Action이 알맞는 Store로 전달될 수 있게 한다. (Flux의 중심)
• Store: 앱의 상태를 저장해두는 곳이다. Store는 상태와 관련된 로직을 포함하며, Action을 통해 상태가 업데이트되면 해당 변경 사항을 View에 알린다.
• View: UI를 렌더링한다. 컴포넌트가 주로 이 역할을 수행한다. Store로부터 상태를 받아와 화면에 표시한다.

우리가 흔히 알고 있는 MVC 패턴에서는 여러 컴포넌트와 모델이 상호작용하면서 데이터 흐름이 복잡해지고, 상태 관리가 어려워질 수 있다. Flux 패턴은 이 문제를 해결하기 위해 단방향 데이터 흐름을 도입한다. Flux를 사용하면 데이터가 한 방향으로만 흐르기 때문에 상태 변화를 추적하고 디버깅하기가 훨씬 쉽다. Flux에서는 Action과 Store 간의 관계가 명확하기 때문에, 버그가 발생할 때 데이터가 어떻게 흘러가는지 쉽게 추적할 수 있다.

 

// Action 생성
const addItemAction = {
  type: 'ADD_ITEM',
  payload: { item: 'New Item' }
};

// Dispatcher
const dispatcher = new Dispatcher();
dispatcher.register(store => {
  if (addItemAction.type === 'ADD_ITEM') {
    store.add(addItemAction.payload.item);
  }
});

// Store
class Store {
  constructor() {
    this.items = [];
  }
  
  add(item) {
    this.items.push(item);
    console.log('Item added:', this.items); // View 렌더링
  }
}

const store = new Store();
dispatcher.dispatch(addItemAction); // Store에 Action 전달

 

Flux 패턴에서의 데이터 흐름은 위 코드처럼 [Action 생성 → Dispatcher로 Action 전달 → Store가 상태 업데이트 → View에 렌더링] 순을 따른다.

 

약간의 차이점이 있지만 Redux가 바로 flux에서 파생된 상태 관리 라이브러리다. 애플리케이션의 규모로 인해 상태 관리 문제를 겪고 있다면, flux 패턴 도입을 고려해볼 수 있겠다.