[React] Http 통신을 해보자

목차

 

프론트를 위주로 정리해서 백엔드 코드는 생략하겠다

 

데이터 받아오기

아래와 같이 useEffect를 통해 통신으로 데이터를 받아온다.

그렇지 않으면 무한 루프에 빠지게 된다.

import Places from "./Places.jsx";
import { useState, useEffect } from "react";

export default function AvailablePlaces({ onSelectPlace }) {
  const [availablePlaces, setAvailableplaces] = useState([]);
  useEffect(() => {
    fetch("http://localhost:4000/places")
      .then((response) => {
        return response.json();
      })
      .then((resData) => {
        setAvailableplaces(resData.places);
      });
  }, []);

  return (
    <Places
      title="Available Places"
      places={availablePlaces}
      fallbackText="No places available."
      onSelectPlace={onSelectPlace}
    />
  );
}

 

더 가독성 있는 코드

import Places from "./Places.jsx";
import { useState, useEffect } from "react";

export default function AvailablePlaces({ onSelectPlace }) {
  const [availablePlaces, setAvailableplaces] = useState([]);
  useEffect(() => {

    async function fetchData(){
      const response = await fetch("http://localhost:4000/places");
      const resData = await response.json();
      setAvailableplaces(resData.places);
    }
    fetchData();
  }, []);

  return (
    <Places
      title="Available Places"
      places={availablePlaces}
      fallbackText="No places available."
      onSelectPlace={onSelectPlace}
    />
  );
}

 

로딩 state 만들기

이런식으로 느린 4G로 설정을 바꾸면 랜더링이 느려 갑자기 화면 전환이 일어나는 것을 볼 수 있다.

 

 

isLoading이 true일때 loading text가 뜨게 프롭스로 전달해 주면 된다.

import Places from "./Places.jsx";
import { useState, useEffect } from "react";

export default function AvailablePlaces({ onSelectPlace }) {
  const [availablePlaces, setAvailableplaces] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      const response = await fetch("http://localhost:4000/places");
      const resData = await response.json();
      setAvailableplaces(resData.places);
      setIsLoading(false);
    }
    fetchData();
  }, []);

  return (
    <Places
      title="Available Places"
      places={availablePlaces}
      isLoading={isLoading}
      loadingText={"loading..."}
      fallbackText="No places available."
      onSelectPlace={onSelectPlace}
    />
  );
}

 

의존성 배열에는 availablePlaces를 넣게 되면 무한루프에 빠지게 된다.

정보가 갱신되면 또 fetchData를 호출하기 때문이다.

 

HTTP 에러 핸들링 하기

에러가 일어나는 이유는 크게 두가지가 있다.

 

1. 요청을 보내는 것이 실패하는 경우

 

2. 백엔드에 전달은 되었지만 백엔드가 에러 응답을 보내는 경우

 

import Places from "./Places.jsx";
import { useState, useEffect } from "react";
import Error from "./Error.jsx";
export default function AvailablePlaces({ onSelectPlace }) {
  const [availablePlaces, setAvailableplaces] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      try {
        const response = await fetch("http://localhost:4000/places");
        const resData = await response.json();
        //에러 응답인 경우
        if (!response.ok) {
          throw new Error("Failed to fetch places");
        }

        setAvailableplaces(resData.places);
      //fetch도 실패한 경우 네트워크 에러
      } catch (error) {
        setError({ message: error.message || "cant fetch" });
      }

      setIsLoading(false); //밖에 빼주어 에러가 나든 안나든 false로 만들어 줌
    }
    fetchData();
  }, []);

  if (error) {
    return <Error title="An error occured!" message={error.message}></Error>;
  }

  return (
    <Places
      title="Available Places"
      places={availablePlaces}
      isLoading={isLoading}
      loadingText={"loading..."}
      fallbackText="No places available."
      onSelectPlace={onSelectPlace}
    />
  );
}

 

 

데이터 수정 요청하기

//벡엔드가 특정 종류의 요청과 정확히 원하는 데이터만 받음
export async function updateUserPlaces(places) {
  const response = await fetch("http://localhost:4000/user-places", {
    //자바의 배열은 첨부할 수 있는 형식이 아님
    method: "PUT",
    body: JSON.stringify({ places }),
    //요청에 첨부될 데이터가 json형식이라고 알려줘야함
    headers: {
      "Content-Type": "application/json",
    },
  });

  const resData = await response.json();
  if (!response.ok) {

    throw new Error("Failed to update user data.");
  }
  return resData.message;
}