[React] Queue 자료구조를 사용한 Task Scheduling

React Cycle 내에서 앱 전반적으로 Task를 Scheduling 할 수 있는 Core Class가 필요했다.

 

Task를 순차적으로 처리해야 하므로 FIFO 구조의 Queue를 사용하였으며, 

 

type Task = () => void;

class TaskService_ {
  private queue: Task[] = [];
  private isProcessing: boolean = false;

  enqueue(task: Task): void {
    this.queue.push(task);
  }

  execute(): void {
    if (!this.isProcessing) {
      this.processQueue();
    }
  }

  processQueue(): void {
    this.isProcessing = true;
    const task = this.queue.shift();
    if (task) {
      try {
        task();
        this.isProcessing = false;
      } catch (error) {
        console.error("Error processing task:", error);
      }
    }
    if (this.queue.length === 0) {
      localStorage.setItem("isExecutedLobbyTaskQueue", "true");
      return;
    }
  }
}

export const TaskService = new TaskService_();

위와 같이 Task Queue를 생성해주었다. 해당 Class의 함수들은 React 사이클 내에서 자유롭게 사용할 수 있었으며,

나는 앱 진입 시점에서 필요한 Task를 모두 enqueue 해주어야 했으므로, 최상단에서 Custom hook을 걸어준 뒤

hook 안에서 필요한 Task들을 순차적으로 enqueue해주었다.

 

또한 필요한 시점에 execute를 호출하여 순차적으로 Task 함수들이 실행되도록 하여 필요한 함수들의 실행 순서를 제어할 수 있었다.