useAsyncTasks

Introduce

비동기 작업 리스트와 옵션을 받아 로딩 상태, 데이터, 오류 등을 관리하며, 컴포넌트 언마운트 시 상태 업데이트를 방지합니다.

interface UseAsyncTasksProps<R> {
  tasks: Task<R>[];
  options?: Options<R>;
}
 
interface UseAsyncTasksReturns<R> {
  isLoading: boolean;
  data: R | null;
  error: Error | null;
  isError: boolean;
  reset: () => void;
}
 
const useAsyncTasks = <R>(tasks: Task<R>[], options: Options<R>): UseAsyncTasksReturns<R> => { ... }

Props

tasks : 실행할 비동기 작업들의 배열입니다. 비동기 함수 외에도 일반 함수, 원시 데이터 등을 전달할 수 있습니다.

Returns

isLoading : 현재 비동기 작업이 진행 중인지 여부를 나타내는 불리언 값입니다.
data : 성공적으로 완료된 작업의 결과를 담고 있는 데이터입니다.
error : 작업 중 발생한 오류 정보를 포함합니다.
isError : 오류가 발생했는지 여부를 나타내는 불리언 값입니다.
reset : 이전 상태를 초기화하여 초기 상태로 되돌리는 함수입니다.

Examples

TestComponent.tsx

const fetchUsers = async () => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
  if (!response.ok) throw new Error('사용자 목록을 가져오지 못했습니다.');
  return response.json();
};
 
const TestComponent = () => {
  const { isLoading, data, error, isError, reset } = useAsyncTasks<
    { id: string; name: string }[]
  >([fetchUsers], {
    onSuccess: () => console.log('사용자 목록을 성공적으로 가져왔습니다!'),
    onError: (err) => console.error('오류:', err),
  });
 
  return (
    <div>
      <button onClick={reset}>재로드</button>
      {isLoading && <p>로딩 중...</p>}
      {isError && <p>오류: {error?.message}</p>}
      {data && (
        <ul>
          {data.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

useReactHooks useClipboard