#16 Flux패턴

1. Flux 패턴이란?

Flux는 Facebook이 만든 단방향 데이터 흐름(One-way Data Flow) 아키텍처 패턴으로, React 애플리케이션에서 상태 관리를 단순화하고 예측 가능하게 만드는 데 사용됩니다.

🔹 특징

• 단방향 데이터 흐름 유지
• 명확한 역할을 가진 4가지 핵심 요소
• 상태(State)를 중앙에서 관리
• 애플리케이션의 예측 가능성을 높임

---

2. Flux 패턴의 주요 구성 요소

Flux는 총 4가지 핵심 요소로 구성됩니다.

① Action (액션)

• 사용자의 입력이나 외부 이벤트를 기반으로 발생하는 이벤트 객체
• 예: 버튼 클릭, API 요청 응답

📌 예제 (액션 생성 함수)

const addTodo = (text) => {
  return {
    type: "ADD_TODO",
    payload: text
  };
};

 

② Dispatcher (디스패처)

• 모든 액션을 중앙에서 처리하는 중앙 허브
• 액션을 받아서 스토어(Store)에 전달
• 애플리케이션의 모든 데이터 흐름을 관리

📌 예제 (Dispatcher 구현)

import { Dispatcher } from "flux";

const AppDispatcher = new Dispatcher();

AppDispatcher.dispatch({
  type: "ADD_TODO",
  payload: "Study Flux Pattern"
});

 

③ Store (스토어)

• 애플리케이션의 상태(State) 를 관리하는 곳
• 액션을 받고, 상태를 업데이트한 후 뷰(View)에 변경 사항을 알림

📌 예제 (스토어 구현)

 

import { EventEmitter } from "events";

class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = [];
  }

  getTodos() {
    return this.todos;
  }

  handleActions(action) {
    switch (action.type) {
      case "ADD_TODO":
        this.todos.push(action.payload);
        this.emit("change");
        break;
    }
  }
}

const todoStore = new TodoStore();
export default todoStore;

④ View (뷰)

• React 컴포넌트 또는 UI 레이어
• 스토어에서 변경된 데이터를 받아서 렌더링

📌 예제 (React 컴포넌트)

 

 

import { EventEmitter } from "events";

class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = [];
  }

  getTodos() {
    return this.todos;
  }

  handleActions(action) {
    switch (action.type) {
      case "ADD_TODO":
        this.todos.push(action.payload);
        this.emit("change");
        break;
    }
  }
}

const todoStore = new TodoStore();
export default todoStore;

 

3. Flux 패턴의 데이터 흐름

[사용자 입력]  → Action → Dispatcher → Store → View(React)

 

 

 

 

 

1️⃣ 사용자가 버튼을 클릭하면 액션(Action) 이 생성됨
2️⃣ 디스패처(Dispatcher) 가 액션을 스토어(Store) 에 전달
3️⃣ 스토어(Store) 가 데이터를 변경하고 이벤트를 발생
4️⃣ 뷰(View, React 컴포넌트) 가 상태(State) 변화를 감지하고 UI를 업데이트

---

4. Redux vs Flux 비교

비교 항목FluxRedux

데이터 흐름	단방향	단방향
Dispatcher	있음	없음 (단일 reducer 사용)
Store	여러 개 가능	단일 Store 사용
사용성	직접 구현해야 함	Redux 라이브러리 제공
확장성	복잡한 구조	미들웨어(Redux-thunk, Redux-saga) 지원

➡️ Redux는 Flux 패턴을 기반으로 한 개선된 상태 관리 라이브러리입니다.

---

5. Flux 패턴의 장점과 단점

✅ 장점

• 데이터 흐름이 예측 가능하고 디버깅이 쉬움
• 모든 상태 변경이 추적 가능
• React와 궁합이 좋음

❌ 단점

• 초기 설정이 복잡
• 작은 프로젝트에서는 Redux 같은 라이브러리가 더 유용

---

📌 정리

• Flux는 단방향 데이터 흐름 아키텍처로, React 애플리케이션의 상태 관리를 쉽게 함
• 핵심 요소는 Action, Dispatcher, Store, View
• Redux는 Flux를 개선하여 단일 Store를 사용하도록 변경
• Flux 패턴을 이해하면 Redux, Recoil, Zustand 같은 상태 관리 라이브러리를 쉽게 이해 가능
•