React - useFetch란?

useFetch

payload 변수, loading 변수, error변수

useEffect는 componentdidmount처럼 쓰려고 []을 전달해준다. 해당 배열안에는 트레킹할 변수들을 넣어주면. 그 변수가 바뀔때만 update가 된다. 해당 변수가 비어있으니, didmount만 하고 끝~

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);
      setPayload(data);
    } catch {
      setError("something is worng!");
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    callUrl();
  }, []);
  return { payload, loading, error };
}

#2.1 lading, error, payload 에 따른 로직 처리

      <div>
        {loading && <span>loading yout Cats</span>}
        {!loading && error && <span>{error}</span>}
        {!loading && payload && <img src={payload.results[0].picture.large} />}
      </div>

# 2.2 예제

import React, { useState, useEffect } from "react";
import "./styles.css";
import Axios from "axios";
/**
 * useState를 통해 변수를 하나 만듬
 * input를 위해 이름을 깔맞춤 했는데, value와 onChange로
 * value는 단지 변수를 넣어주면 되고
 * onChange는 함수를 줘야하고 event를 퉤 던지기 때문에 해당 함수를 만들어줘서
 * 리턴한다.
 */

/**
 * useEffect 컴포넌트 didmount, 컴포넌트 didupdate랑 같은거?!
 */
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);
      setPayload(data);
    } catch {
      setError("something is worng!");
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    callUrl();
  }, []);
  return { payload, loading, error };
}

export default function App() {
  const name = useInput("");
  //http://aws.random.cat/meow
  const { payload, loading, error } = useFetch("https://randomuser.me/api/");
  return (
    <div className="App">
      <h1>Use Hook to INPUT && FETCHING</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
        {loading && <span>loading yout Cats</span>}
        {!loading && error && <span>{error}</span>}
        {!loading && payload && <img src={payload.results[0].picture.large} />}
      </div>
    </div>
  );
}