훅(Hook)

[useAsync] 비동기 상태 관리

API 호출과 비동기 작업의 로딩·에러·데이터 상태를 자동으로 관리하는 필수 훅입니다.

React HooksPromise상태관리async/await

라이브 데모

새 탭에서 열기

데모 불러오는 중…

제작 과정

한 줄 요약

API 호출이나 시간이 걸리는 비동기 작업의 로딩에러데이터 상태를 깔끔하게 한 곳에서 관리합니다.

이럴 때 필요해요

데이터 페칭, 폼 제출, 파일 업로드 등 비동기 작업을 할 때마다 useState로 로딩/에러/데이터를 따로 관리하는 게 번거롭다면 이 훅이 답입니다. 특히 같은 패턴이 여러 컴포넌트에 반복될 때 큰 도움이 됩니다.

어떻게 동작하나

asyncFn 함수를 전달하면 훅이 즉시 실행 (immediate: true)
진행 중이면 isLoading이 true
완료되면 data나 error를 반환
userId처럼 의존성을 전달하면 그 값이 바뀔 때마다 자동으로 재실행
execute 함수로 언제든 수동으로 다시 호출 가능

놓치기 쉬운 것

deps를 제대로 설정하지 않으면 의도치 않게 무한 호출 될 수 있습니다
클린업 함수가 필요한 경우 (예: abort controller) 훅 내에서 처리해야 합니다
에러가 발생해도 component는 렌더되니 error를 체크해서 에러 UI를 별도로 표시해야 합니다

이런 곳에 써요

댓글메시지 목록 가져오기
사용자 프로필 로드
폼 제출 후 결과 처리
필터검색 결과 페칭
페이지 초기 데이터 로드

소스 코드

· 데모 페이지에서 자동 추출

'use client';

import { UseAsyncDemo } from './-components/UseAsyncDemo';

export default function UseAsyncPage() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-zinc-50 px-4 py-12">
      <div className="w-full max-w-2xl">
        <UseAsyncDemo />
      </div>
    </div>
  );
}

66조회수

댓글