// GET 요청
const response = await fetch(
  "https://react-http-f2dde-default-rtdb.firebaseio.com/movies.json"
);
if (!response.ok) {
  throw new Error("Something went wrong!");
}

const data = await response.json();


// 버튼 등록
<button onClick={fetchMoviesHandler}>Fetch Movies</button>
JavaScript
복사

•

Fetch API를 이용해서 영화 정보를 가져오기

로딩 및 데이터 State 처리하기

NOTE

로딩시간 동안 로딩중이라는 문구가 출력됨.

async function fetchMoviesHandler() {
  setIsLoading(true);
  const response = await fetch("https://swapi.dev/api/films/");
  const data = await response.json();

  const transformedMovies = data.results.map((movieData) => {
    return {
      id: movieData.episode_id,
      title: movieData.title,
      openingText: movieData.opening_crawl,
      releaseDate: movieData.release_date,
    };
  });
  setMovies(transformedMovies);
  setIsLoading(false);
}
JavaScript
복사

•

지금의 예제는 버튼을 클릭하고 데이터가 가져오는 시간동안 잠시 공백이 생긴다.

•

이 시간동안 로딩창을 뛰운다.

Http 오류 처리하기

NOTE

만약 요청이 잘못되면 그에 해당하는 예외처리 결과를 보여줌

setError(null); //fetchMoviesHandler함수를 실행할 떄  
// 이전 에러를  null로 초기화 해줍니다.

try {
	// 현재 링크가 잘못됨!
  const response = await fetch("https://swapi.dev/api/films/m");
  if (!response.ok) {
    throw new Error("Something went wrong!");
  }

  const data = await response.json();

  const transformedMovies = data.results.map((movieData) => {
    return {
      id: movieData.episode_id,
      title: movieData.title,
      openingText: movieData.opening_crawl,
      releaseDate: movieData.release_date,
    };
  });
  setMovies(transformedMovies);
} catch (error) {
  setError(error.message);
}
setIsLoading(false);
JavaScript
복사

•

async, await를 사용하지 않으면 .catch()로 예외를 잡을 수 있으나, 지금은 아니므로 try~catch를 사용한다.

요청에 useEffect() 사용하기

NOTE

접속하면 바로 데이터 가져옴 (현재 이미지에서는 버튼 클릭을 하는데 그냥 넘어가자)

const fetchMoviesHandler = useCallback(async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch("https://swapi.dev/api/films/");
    if (!response.ok) {
      throw new Error("Something went wrong!");
    }

    const data = await response.json();

    const transformedMovies = data.results.map((movieData) => {
      return {
        id: movieData.episode_id,
        title: movieData.title,
        openingText: movieData.opening_crawl,
        releaseDate: movieData.release_date,
      };
    });
    setMovies(transformedMovies);
  } catch (error) {
    setError(error.message);
  }
  setIsLoading(false);
}, []);
JavaScript
복사

useEffect(() => {
  fetchMoivesHandler();
}, []);
JavaScript
복사

•

현재 우리는 버튼을 클릭해야만 API의 데이터를 불러오고 있는데 보통은 화면에 접속하자마자 데이터를 가져와서 보여줘야 한다.

•

즉시 fetch를 하려면 useEffect 훅을 사용하면 된다!

•

useCallback 훅을 사용해서, 함수가 변경될때 반영되도록 해주자

[ 참고]

•

함수로 호출해도 되지만, 의존성 배열 자리에 그 함수를 다시 호출하면 재 랜더링, 재평가 되면서 무한루프에 빠지게되므로 useEffect를 사용하자!

useEffect(() => {
  fetchMoviesHandler();
}, [fetchMoviesHandler]);

// 무한 루프에 빠지게된다.
JavaScript
복사

POST 요청 보내기 (Fectch Api)

NOTE

POST로 데이터 추가

async function addMovieHandler(movie) {
const response = await fetch(
  "https://react-http-f2dde-default-rtdb.firebaseio.com/movies.json",
  {
    method: "POST",
    body: JSON.stringify(movie),
    headers: {
      "Content-Type": "application/json",
    },
  }
);
JavaScript
복사
POST 코드

•

JSON.stringify() 함수로 객체를 JSON 문자열로 변경해준다.

const fetchMoviesHandler = useCallback(async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(
      "https://react-http-f2dde-default-rtdb.firebaseio.com/movies.json"
    );
    if (!response.ok) {
      throw new Error("Something went wrong!");
    }

    const data = await response.json();

    const loadedMovies = [];

    for (const key in data) {
      loadedMovies.push({
        id: key,
        title: data[key].title,
        openingText: data[key].openingText,
        releaseDate: data[key].releaseDate,
      });
    }

    setMovies(loadedMovies);
  } catch (error) {
    setError(error.message);
  }
  setIsLoading(false);
}, []);
JavaScript
복사
GET 코드

•

firebase의 컬럼은 위와같이 랜덤값으로 들어가있어서 for문을 사용해  json으로 변형시켜줌