Custom Hooks 1차 시도 : useHttp

작은 커스텀 훅들을 만들어보다가 지난주 과제로 받았던 http통신에 대한 훅을 만들기를 시도했다.

(...구글링을 3시간은 넘게 하면서 이것저것 찾아보고 하다가 만들었는데..문제가 많다.)

무슨 함수를 리턴받아서 컴포넌트에서 실행하고자 useEffect에서 호출하니까 무한 루프에 빠져서 탈출하려고 useCallback으로 어찌저찌 땜빵은 했는데.. 훅을 만들었는데 오히려 머리가 아파진건 왜인지ㅠㅠ

import { useCallback, useState } from "react";

const useHttp = (funcHttp) => {

  const [isLoading, setIsLoading] = useState(false);

  const [error, setError] = useState(null);

  const sendRequest = useCallback(

    async (reqHttp) => {

      setIsLoading(true);

      setError(null);

      try {

        const response = await fetch(reqHttp.url, {

          method: reqHttp.method ?? "GET",

          headers: reqHttp.headers ?? {},

          body: JSON.stringify(reqHttp.body) ?? null,

        });

        if (!response.ok) {

          console.log("in");

          throw new Error("요청실패");

        }

        const data = await response.json();

// 데이터 조작 함수

        return funcHttp(data);

 

      } catch (err) {

        setError(err.message || "에러!");

      }

      setIsLoading(false);

    },

    [funcHttp]

  );

  return {

    isLoading,

    error,

    sendRequest,

  };

};

export default useHttp;

좀 더 작은 커스텀 훅을 도전해봐야겠다. 
useInput은 해봤고, 뭐가 좋을까.. 다음주까지 목표는 말끔한 useAxios 훅 만들기로 정했다.