[리액트 React] Custom Hook 만들기 / useAsync

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는

리액트에서 '비동기 함수의 로딩/에러처리 할 때 사용할 수 있는 useAsync'(Custom Hook)에 대해 공유하겠습니다.

 

https://github.com/streamich/react-use

해당 링크 들어가서 보시면, 다양한 Custom Hook이 만들어져 있는데요.

리액트로 개발할 때 유용하게 사용될 것 같습니다.

GitHub - streamich/react-use: React Hooks — 👍

 

 

  useAsync

wrappedFunction이라는 함수를 만들어서 사용합니다.

function useAsync(asyncFunction) {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState(null);

  const wrappedFunction = useCallback(async (...args) => {
    setPending(true);
    setError(null);
    try {
      return await asyncFunction(...args);
    } catch (error) {
      setError(error);
    } finally {
      setPending(false);
    }
  }, [asyncFunction]);

  return [pending, error, wrappedFunction];
}