flux패턴 ★★★

1. Flux 패턴의 기본 개념

Flux 패턴은 데이터 흐름을 중심으로 애플리케이션의 상태 관리를 진행합니다. 이를 위해 다음과 같은 주요 구성 요소가 있습니다:

액션(Action): 사용자 인터페이스에서 발생하는 이벤트 또는 API 요청과 같은 모든 작업을 나타내는 객체입니다.
디스패처(Dispatcher): 액션을 받아서 등록된 스토어에 알리는 중앙 허브 역할을 합니다.
스토어(Store): 애플리케이션의 상태를 저장하고 관리하는 컴포넌트로, 데이터를 변경하거나 조회할 수 있는 메서드를 제공합니다.
뷰(View): 사용자 인터페이스를 표시하고 스토어의 데이터를 표시하는 역할을 합니다.

 

 

2. Flux 패턴의 데이터 흐름

Flux 패턴의 데이터 흐름은 다음과 같이 동작합니다:

a. 사용자 또는 시스템 이벤트가 액션으로 생성됩니다.

b. 액션은 디스패처에게 전달됩니다.

c. 디스패처는 등록된 스토어에 액션을 전파합니다.

d. 스토어는 액션을 기반으로 상태를 업데이트하고 변경된 상태를 저장합니다.

e. 뷰는 스토어에 상태 변경을 요청하고 업데이트된 데이터를 받아와 화면에 렌더링합니다.

 

 

3. Flux 패턴의 이점

Flux 패턴은 다음과 같은 이점을 제공합니다:

예측 가능한 데이터 흐름: 데이터가 단방향으로 흐르기 때문에 애플리케이션의 상태 변화를 예측하기 쉽습니다.
디버깅 용이성: 개발자는 액션과 스토어의 상호작용을 추적하고 디버깅하기 쉽습니다.
모듈화와 재사용성: 각 구성 요소는 모듈화되어 있으며, 재사용성이 높아져 코드의 유지보수가 용이합니다.

 

 

4. Flux 패턴의 구현 예시

// 액션
const ActionTypes = {
  ADD_TODO: 'ADD_TODO',
};

// 액션 생성자
function addTodoAction(text) {
  return {
    type: ActionTypes.ADD_TODO,
    text,
  };
}

// 스토어
class TodoStore {
  constructor() {
    this.todos = [];
  }

  addTodo(text) {
    this.todos.push({ text, completed: false });
  }

  getAllTodos() {
    return this.todos;
  }
}

// 디스패처
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }

  register(callback) {
    this.callbacks.push(callback);
  }

  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// 뷰
const todoStore = new TodoStore();
const dispatcher = new Dispatcher();

dispatcher.register(action => {
  switch (action.type) {
    case ActionTypes.ADD_TODO:
      todoStore.addTodo(action.text);
      break;
    // 다른 액션 처리 로직 추가 가능
  }
});

// 뷰에서 액션을 발생시키는 예시
const newTodoText = 'Write a blog post';
dispatcher.dispatch(addTodoAction(newTodoText));