본문으로 건너뛰기

함수: createQueuer()

function createQueuer<TValue, TSelected>(
   fn, 
   options, 
selector): SolidQueuer<TValue, TSelected>;

정의 위치: solid-pacer/src/queuer/createQueuer.ts:156

동기 항목 큐를 관리하는 Solid 호환 Queuer 인스턴스를 생성하고 모든 상태 속성을 Solid 시그널로 노출합니다.

기능:

  • 제공된 fn 함수를 사용한 항목 동기 처리
  • FIFO(First In First Out) 또는 LIFO(Last In First Out) 큐 동작
  • getPriority 또는 항목의 priority 속성을 통한 우선순위 큐
  • 항목 만료 및 오래된 항목 제거
  • 항목 처리 사이의 구성 가능한 대기 시간
  • 처리 일시 중지/재개
  • 큐 상태 변경, 실행, 거부, 만료를 위한 콜백
  • 모든 상태 속성(항목, 횟수 등)은 반응성을 위해 Solid 시그널로 노출됩니다.

큐는 각 항목 사이에 선택적 지연을 적용하여 항목을 순서대로 동기 처리합니다. 시작되면 틱마다 항목 하나를 처리하며 틱 사이에 선택적 대기 시간을 둘 수 있습니다. stop()과 start()로 처리를 일시 중지하고 재개할 수 있습니다.

기본적으로 큐는 FIFO 방식이지만 항목을 추가하거나 제거할 때 위치를 지정하여 LIFO 또는 양방향 큐를 구성할 수 있습니다.

상태 관리와 셀렉터​

훅은 반응형 상태 관리에 TanStack Store를 사용합니다. 다음 두 가지 방식으로 상태 변경을 구독할 수 있습니다. 구독 방식은 다음과 같습니다.

1. queuer.Subscribe 컴포넌트 사용(컴포넌트 트리 구독에 권장)

Subscribe 컴포넌트를 사용하면 컴포넌트 트리 깊은 곳에서 상태 변경을 구독하면서도 훅에 셀렉터를 전달할 필요가 없습니다. 자식 컴포넌트에서 상태를 구독하려는 경우에 적합합니다.

2. selector 매개변수 사용(훅 수준 구독)

selector 매개변수로 반응형 업데이트를 트리거할 상태 변경을 지정할 수 있으며, 훅 수준에서 관련 없는 상태가 변경될 때 불필요한 업데이트를 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 반응형 상태를 추적하려면 셀렉터 함수를 제공하여 셀렉터 함수를 제공하거나 Subscribe 컴포넌트를 사용해 명시적으로 활성화해야 합니다. 이를 통해 불필요한 업데이트를 방지하고 컴포넌트가 상태 변경을 추적할 시점을 완전히 제어할 수 있습니다.

사용할 수 있는 상태 속성은 다음과 같습니다.

  • executionCount: 처리된 항목 수
  • isRunning: 큐어가 현재 실행 중인지 여부(중지되지 않음)
  • items: 현재 처리를 위해 큐에 대기 중인 항목 배열
  • rejectionCount: 거부된 항목 수(만료 또는 검증 실패)

언마운트 동작​

기본적으로 소유 컴포넌트가 마운트 해제되면 큐어를 중지합니다. onUnmount 옵션으로 이 동작을 사용자 지정할 수 있습니다. 예를 들어 대기 중인 항목을 대신 플러시하려면 다음과 같이 설정합니다.

const queue = createQueuer(fn, {
  started: true,
  wait: 1000,
  onUnmount: (q) => q.flush()
});

사용 예시:

// Default behavior - no reactive state subscriptions
const queue = createQueuer(
  (item) => {
    // process item synchronously
    console.log('Processing', item);
  },
  {
    started: true, // Start processing immediately
    wait: 1000,    // Process one item every second
    getPriority: (item) => item.priority // Process higher priority items first
  }
);

// Opt-in to track items or isRunning changes (optimized for UI updates)
const queue = createQueuer(
  (item) => console.log('Processing', item),
  { started: true, wait: 1000 },
  (state) => ({ items: state.items, isRunning: state.isRunning })
);

// Opt-in to track execution metrics changes (optimized for tracking progress)
const queue = createQueuer(
  (item) => console.log('Processing', item),
  { started: true, wait: 1000 },
  (state) => ({
    executionCount: state.executionCount,
    rejectionCount: state.rejectionCount
  })
);

// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');

// Control the scheduler
queue.stop();  // Pause processing
queue.start(); // Resume processing

// Access the selected state (will be empty object {} unless selector provided)
const { items, isRunning } = queue.state();

타입 매개변수​

TValue​

TValue

TSelected​

TSelected = { }

매개변수​

fn​

(item) => void

options​

SolidQueuerOptions&lt;TValue, TSelected> = {}

selector​

(state) => TSelected

반환값​

SolidQueuer&lt;TValue, TSelected>