14.8 usePromise 커스텀 Hook 만들기

    이번에는 컴포넌트에서 API 호출처럼 Promise를 사용해야 하는 경우 더욱 간결하게 코드를 작성할 수 있도록 해 주는 커스텀 Hook을 만들어서 우리 프로젝트에 적용해 보겠습니다.

    우리가 만들 Hook의 이름은 usePromise입니다. src 디렉터리에 lib 디렉터리를 만들고, 그 안에 usePromise.js를 다음과 같이 작성해 보세요.

    lib/usePromise.js

    import { useState, useEffect } from 'react';
     
    export default function usePromise(promiseCreator, deps) {
      // 대기 /완료/실패에 대한 상태 관리
      const [loading, setLoading] = useState(false);
      const [resolved, setResolved] = useState(null);
      const [error, setError] = useState(null);
     
      useEffect(() => {
        const process = async () => {
          setLoading(true);
          try {
            const resolved = await promiseCreator();
            setResolved(resolved);
          } catch (e) {
            setError(e);
          }
          setLoading(false);
        };
        process();
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, deps);
     
      return [loading, resolved, error];
    }

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.