진행사항

• API URL을 변경
  • Coin Tracker → Movie API
• async / await 복습
• fetch 복습
• try - catch 복습

코드

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    try {
      const response = await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      );
      const json = await response.json();
      setMovies(json.data.movies);
      setLoading(false);
    } catch (error) {
      console.error("Failed to fetch coins", error);
      setLoading(false); // 에러 발생 시에도 로딩 상태 해제
    }
  };

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

  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          <h1>Movie Information of IrishNoah Cinema</h1>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image} />
              <h2>Title : {movie.title}</h2>
              <h3>
                Runtime : {movie.runtime} minutes / Rating : {movie.rating}
              </h3>
              <h3>Summary</h3>
              <p>{movie.summary}</p>
              <h3>Genre</h3>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
export default App;

• https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year 라는 주소에서 Movie와 관련된 API를 async, await, fetch를 통해서 가져온다.
• 각 영화의 제목 / 이미지 / 요약 / 평점 / 런타임을 보여준다.

결과 화면

느낀점

최근에 했던 실습에 이어 async / await / fetch 를 통해 API에 대한 정보를 가져오는 것을 복습했고, 더 나아가 try - catch 역시 복습했다.

예전에는 이 메서드들을 사용하는 것이 너무 어려워 보였는데, 막상 사용해보니 크게 별 것 아니라는 생각이 든다.

• async / await → 비동기 작업 시 사용
• fetch → API Data를 가져올 때 사용

참고

• Modern javascript - (try-catch-finally)
  • https://ko.javascript.info/try-catch