커스텀 훅으로 자주 사용하는 것들 모듈화(Util 파일로 만들어서 사용하기)

useInput, useFetch 만들어 쓰기


const App = () => {
  const nameHook = useInput("");
  const { payload, loading, error } = useFetch("http://aws.random.cat/meow");
  // console.log(nameHook)
  return (
    <div>
      <h1>use Hooks</h1>
      <input {...nameHook} placeholder="what your name" />
      <br/>
      {loading && <span>loading your cat</span>}
      {!loading && error && <span>{error}</span>}
      {!loading && payload && <img src={payload.file} width="150" />}
    </div>
  );
};

value와 onChange 바인딩된 input을 Hook으로 만들기


export function useInput(defaultValue) {
  const [ value, setValue ] = useState(defaultValue);

  const onChange = (e) => {
  //const value = e.target.value;
    const { target: { value } } = e; 

    setValue(value);
  };

  return { value, onChange }
}

에러 로딩 처리된 ajax


export function useFetch(url) {
  const [ payload , setPayload ] = useState(null);
  const [ loading, setLoading ] = useState(true);
  const [ error, setError ] = useState("");

  const callUrl = async () => {
    try {
      const { data } = await Axios.get(url);
      // throw Error(); 에러 제대로 뜨나 확인용
      setPayload(data);
    } catch (e) {
      setError("error!!");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    // only did mount
    callUrl();
  }, []);

  return { payload, loading, error };
}