[TIL] 220128

Lee Syong·2022년 1월 28일

JavaScript React TIL

TIL

목록 보기

163/204

📝 오늘 한 것

PRACTICE

📚 배운 것

linkedList는 gitlab 커밋

1. PRACTICE

3) movie app

(1) useEffect() / API 호출

방법 1: promise / then 사용

useEffect(function () {
  fetch(
    "https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
  )
    .then((response) => response.json())
    .then((info) => {
    setMovies(info.data.movies);
    setLoading(false);
  });
}, []);

방법 2: async / await 사용

const getMovies = async () => {
  const json = await (
    await fetch(
      "https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
    )
  ).json();
  setMovies(json.data.movies);
  setLoading(false);
};

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

(2) 컴포넌트 렌더링

이를 바탕으로 렌더링할 App 컴포넌트를 작성했다.

return (
  <div>
    <h1>Movies {loading ? null : `(${movies.length})`}</h1>
    {loading ? (
      <strong>로딩 중...</strong>
    ) : (
      <div>
        {movies.map((movie) => {
          return (
            <div key={movie.id}>
              <a href={movie.url} target="_blank" rel="noreferrer">
                <h2>{movie.title}</h2>
              </a>
              <img src={movie.medium_cover_image} alt={movie.title} />
              {movie.genres.map((genre) => (
                <li key={genre}>{genre} </li>
              ))}
              <p>{movie.summary}</p>
            </div>
          );
        })}
      </div>
    )}
  </div>
);

알아보기 쉽게 정리하기 위해 js 파일을 하나 더 만들어서 컴포넌트로 만든 후 이를 export & import 했다.

import Movie from "./Movie";
import PropTypes from "prop-types";

Movie.propTypes = {
  title: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  img: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
  summary: PropTypes.string.isRequired,
};

// Movie.js
const Movie = ({ title, url, img, genres, summary }) => {
  return (
    <div>
      <a href={url} target="_blank" rel="noreferrer">
        <h2>{title}</h2>
      </a>
      <img src={img} alt={title} />
      {genres.map((genre) => (
        <li key={genre}>{genre} </li>
      ))}
      <p>{summary}</p>
    </div>
  );
};

export default Movie;