REST API 호출해보기

1. useEffect()를 이용해서 fetch()하기

 const [days, setDays] = useState([]);

useEffect(() => {
    fetch(`http://localhost:3001/days`)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDays(data);
      });
  }, []);

의존성 배열이 비어있기 때문에 첫 렌더링시만 실행이 된다.
이때 fetch()를 통해서 지정된 url에서 데이터를 가져오고
그 결과가 res에 담기며 res를 return 한다.

이때 res를 .json()을 통해서 json 형태로 변경해준다.

이후 then을 이용해서 data를 setDays라는 state에 넣어준다.

2. custom hook으로 만들기

가. hooks라는 폴더를 새로 생성하고

나. 기존의 함수를 집어넣는다

export default function useFetch() {
 const [days, setDays] = useState([]);

useEffect(() => {
    fetch(`http://localhost:3001/days`)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDays(data);
      });
  }, []);
  return data;
}

다. 파라미터를 만들어 주는데 변하는 부분에 대해서 파라미터를 입력한다.

여기서는 url부분이 변하기 때문에 url을 파라미터로 넣어준다

export default function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setData(data);
      });
  }, [url]);

  return data;
}

라. 이후 state를 리턴해준다.

3. REST API 요청하기

fetch(`http://localhost:3001/words/${word.id}`, {
      method: "PUT",
  // 사용할 method를 입력
      headers: {
        "content-Type": "application/json",
        // contents의 타입을 지정
      },
      body: JSON.stringify({
        // body에는 변경할 데이터를 넣어준다.
        // JSON으로 데이터를 잡아서 JSON형식으로 변경해줌
      }),
    }).then((res) => {
      if (res.ok) {
        //실행할 액션들;
      }
    });