React 19 Actions (useAction 훅)

#34ReactMedium

React 19 Actions (useAction 훅)

React 19 Actions 패턴

비동기 action 함수를 감싸 pending/error/data 상태를 관리하는 커스텀 훅 useAction을 구현하세요.

시그니처

function useAction<TInput, TOutput>(
  action: (input: TInput) => Promise<TOutput>
): {
  run: (input: TInput) => Promise<void>;
  data: TOutput | null;
  error: Error | null;
  pending: boolean;
};

동작

run(input) 호출 시 pending이 즉시 true가 됩니다.
action이 성공하면 data에 결과가 담기고 pending은 false가 됩니다.
action이 실패하면 error에 에러가 담기고 pending은 false가 됩니다.
새 run 호출은 이전 data/error를 초기화합니다.

학습 포인트

React 19 useActionState/useFormStatus의 핵심 아이디어를 직접 구현
비동기 흐름의 pending/success/error 상태 모델링
컴포넌트 마운트 여부와 무관하게 안전한 상태 업데이트

import { useState, useCallback } from 'react';

export function useAction<TInput, TOutput>(
  action: (input: TInput) => Promise<TOutput>
) {
  // TODO: data, error, pending 상태를 useState로 관리하세요.
  // TODO: run(input) 함수는:
  //   1) pending=true, error=null, data=null 로 초기화
  //   2) action(input)을 await
  //   3) 성공 시 data 설정, 실패 시 error 설정
  //   4) finally에서 pending=false
  const run = useCallback(async (_input: TInput) => {
    // TODO
  }, [action]);

  return {
    run,
    data: null as TOutput | null,
    error: null as Error | null,
    pending: false,
  };
}

Open Sandbox

Sandpack 로드 중…