에러를 다음 렌더링 주기에 던지는 훅입니다. 이벤트 핸들러나 비동기 로직처럼 렌더링 중 캐치할 수 없는 에러를

ErrorBoundary

로 전파할 때 사용합니다.

구현

import { useState } from 'react';

export function useThrowError() {
  const [error, setError] = useState<Error>();

  if (error) throw error;

  return setError;
}

사용법

1. 이벤트 핸들러에서 에러 전파

function Button() {
  const throwError = useThrowError();

  return <button onClick={() => throwError(new Error('버튼 클릭 에러'))}>버튼</button>;
}

<ErrorBoundary fallback={<p>이벤트 핸들러 에러</p>}>
  <Button />
</ErrorBoundary>;

2. 비동기 로직에서 에러 전파

function DataFetcher() {
  const throwError = useThrowError();

  const handleFetch = async () => {
    try {
      await fetchData();
    } catch (error) {
      throwError(error as Error);
    }
  };

  return <button onClick={handleFetch}>데이터 불러오기</button>;
}

참조

toss/slash - useErrorBoundary