14.2 HTTP 요청보내기: Http 오류 처리하기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

오류 처리하기

fetch API 를 사용할 때, 에러처리는 흔한 방법인 try,catch 문으로 에러를 처리한다.

하지만 fetch API는 실제 에러로 취급하지 않는 동작들이 있기 때문에

res.ok 가 false이면 에러를 만들도록 하였다.

 

주의할 점은 throw new Error() 로 만든 에러 문구를 먼저 생성한 다음

await res.json() 으로 파싱을 해야한다.

import React, { useState } from "react";

import MoviesList from "./components/MoviesList";
import "./App.css";

function App() {
  const [movies, setMovies] = useState([]);
  const [isLoding, setIsLoding] = useState(false);
  const [error, setError] = useState(null);

  //Fetch API, fetch가 프로미스 객체를 반환해서 then 사용, json이 프로미스 객체 반환하여 then 사용
  async function fetchMoviesHandler() {
    setIsLoding(true);
    setError(null);
    try {
      const res = await fetch("https://swapi.dev/api/films/");

      if (!res.ok) {
        throw new Error("Something went wrong!");
      }
      const data = await res.json();

      const transformedMovies = data.results.map((movieData) => {
        return {
          id: movieData.episode_id, // episode_id 를 id로 바꿈
          title: movieData.title, // title은 안바꿈
          openingText: movieData.opening_crawl, // opening_crawl 를 openingText 바꿈
          releaseDate: movieData.release_date, // release_date 를 releaseDate 바꿈
        };
      });
      setMovies(transformedMovies);
    } catch (error) {
      setError(error.message);
    }
    setIsLoding(false);
  }

  let content = <p>Found no movies.</p>;

  if (movies.length > 0) {
    content = <MoviesList movies={movies} />;
  }
  if (error) {
    content = <p>{error}</p>;
  }

  if (isLoding) {
    content = <p>Loding...</p>;
  }

  return (
    <React.Fragment>
      <section>
        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
      </section>
      <section>{content}</section>
    </React.Fragment>
  );
}

export default App;

가독성을 위해 변수를 생성하여 각각의 상황에 맞게 변수에 렌더할 값을 할당하고

변수를 return 에 넣어준다.