Fetch 사용법(get, post, put, delete) , 커스텀 훅 useFetch

✅ Fetch 사용법 

 

🔸 GET (데이터 가져오기 /  존재하는 자원을 요청)

fetch('url')
  .then((response)=>(response.json()))
  .then((data)=>console.log(data))

response는 객체형태

 

 

🔸 POST (데이터 생성하기 /  새로운 자원 생성 요청)

fetch("http://localhost:3001/blogs", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: blogs.length + 1,
        title: title,
        body: body,
        author: author,
        likes: 0,
      }),
    })
  .then((response) => response.json())
  .then((data) => console.log(data));

 

🔸 PUT ( 존재하는 자원 변경 요청 ) 

fetch(`http://localhost:3001/blogs/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...data,
          likes: data.likes - 1,
        }),
      })
        .then((response) => response.json())
        .then((data) => console.log(data));
      console.log("Reject like!");

 

🔸 DELETE (데이터 삭제하기 / 존재하는 자원 삭제 요청)

기본형태

fetch(`http://localhost:3001/blogs/${id}`, {
      method: "DELETE", //! delete는 body 필요없이 메서드만 전달해주면 됨
    })
      .then((response) => response.json())
      .then((data) => console.log(data));
	.catch(error=>console.log(error));

 

---

✅  커스텀 훅 - useFetch(url)

import { useState, useEffect } from "react";

const useFetch = (url) => {
  // const [data,setData] = useState(null)
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      fetch(url)
        .then((res) => {
          if (!res.ok) {
            throw Error("could not fetch the data for that resource");
          }
          return res.json();
        })
        .then((data) => {
          setIsPending(false);
          setData(data);
          setError(null);
        })
        .catch((err) => {
          setIsPending(false);
          setError(err.message);
        });
    }, 1000);
  }, [url]);

  return [data, isPending, error]; /* return 문을 작성해주세요. */
};

export default useFetch;