useReducer로 만드는 useFetch 커스텀 훅 | HooneyLog

function useFetch(url) {
	// 응답 JSON값
  const [responseJSON,setResponseJSON] = useState(null);

	// 로딩 상태값
  const [isLoading,setIsLoading] = useState(true);

	// 에러 상태값
  const [error,setError] = useState(null);

  useEffect(()=>{

		// unMount시 cancel하기 위한 변수
    let shouldCancel = false;
    const callFetch = async () => {
      setIsLoading(true);
      try {

				// 응답 성공 시
        const response = await fetch(url);
        const newResponseJSON = await response.json();
      
        if(shouldCancel) return;
        setResponseJSON(newResponseJSON);
        setError(null);
      } catch (newError) {
				
				// 응답 실패 시
        if(shouldCancel) return;
        setError(newError);
        setResponseJSON(null);
      }

			// 로딩은 응답 실패하나 성공하나 false로 변경
      setIsLoading(false)
    }

    callFetch();

    return () => {
      shouldCancel = true
    }
  },[url])

  return {
    responseJSON,
    isLoading,
    error
  }
}

javascript
function reducer(state,{type,responseJSON,error}) {
  switch(type) {
    case 'loading':
      return {...state,isLoading:true};
    case 'success':
      return {responseJSON,isLoading:false,error:null};
    case 'error':
      return {responseJSON:null,isLoading:false,error};
    default:
      throw new Error('Unknown action type');
  }
}

function useFetch(url) {
  const [state,dispatch] = useReducer(reducer,{
    responseJSON:null,
    isLoading:true,
    error:null
  })

  useEffect(()=>{
    let shouldCancel = false;
    
    const callFetch = async () => {
      dispatch({type:'loading'})
      try {
        const response = await fetch(url);
        const newResponseJSON = await response.json();
        if(shouldCancel) return;
        dispatch({type:'success',responseJSON:newResponseJSON});
      } catch (newError) {
        if(shouldCancel) return;
        dispatch({type:'error',error:newError});
      }
    }
    callFetch();

    return () => {
      shouldCancel = true
    }
  },[url])

  return state
}