Day 10 - ReactJS

< Movie APP 만들기! >

 

movie API 사용하기

useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    )
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, []);

useEffect를 사용하여 처음 render 될 때만 실행되도록 하였다.

 

import { useEffect, useState } from "react";
function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )
    ).json();

    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  console.log(movies);
  return <div>{loading ? <h1>Loading...</h1> : null}</div>;
}

export default App;

then 대신 async-await을 사용하도록 코드를 수정하였다.

return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        movies.map((movie) => <div key={movie.id}>{movie.title}</div>)
      )}
    </div>
  );

loading이 다 되었으면(False 라면) 영화의 제목을 보여주도록 하였다.

map은 고유의 key가 필요하므로 id를 사용하였다.

영화의 타이틀과 설명 + 장르까지 추가하였다.

코드가 너무 길어져서 Component별로 나누었다 (이걸 미리 보고 Todo를 만들걸)

 

하핫 근데 이러한 오류가 떴다

genres 가 비어있는 array라면 .. 발생하는 오류였다.

따라서 Movie.js에 isRequired 조건을 빼주고 genres가 있는지 검사하는 코드를 추가하니 해결되었다.

// Movie.js
import PropTypes from "prop-types";
function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>{genres && genres.map((g) => <li key={g}>{g}</li>)}</ul>
    </div>
  );
}
Movie.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string),
};
export default Movie;

 

Router 로 페이지 전환을 구현한다.

Router와 BrowserRouter의 차이점은

Router는 /#/~~ 이고 BrowserRouter는 /~~ 이다

#이 붙느냐 아니냐의 차이!

 

Switch는 한 번에 하나의 Route만 렌더링 하기 위해 사용한다.

Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트이다.

링크를 클릭하면 url이 /movie로 전환되며 페이지를 보여준다(수정예정)