Movie App

• https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year 사이트의 자료를 통해 어플을 만들어 보기로 하자.

• 늘 하는 세팅
• 로딩에 대해서 작업 후 false 세팅
• 하지만async/wait가 fetch-then보다 더 많이 쓰인다.

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();
  }, []);

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

  console.log(movies);
  return (
    <div>
      <h1>Movie</h1>
    </div>
  );
}

export default App;

• 이렇게 말이다.

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();
  }, []);

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

export default App;

• map 함수를 통해 response를 화면에 뿌려보았다.

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();
  }, []);

  return (
    <div>
      <h1>Movie</h1>
      {loading ? (
        <h1>looading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <h1>{movie.title}</h1>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}{" "}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

• map 안에서 또 map으로 배열 탐색하기
• 배열 안의 배열

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();
  }, []);

  return (
    <div>
      <h1>Movie</h1>
      {loading ? (
        <h1>looading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image}></img>
              <h1>{movie.title}</h1>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}{" "}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

• 이미지도 뿌리기 가능
• 그냥 state로 받은 data를 적절하게 사용하면 되는 것이다.

Props

• Movie 컴포넌트를 만들었다.
• Props를 받아온다.
• Movie 컴포넌트는 이 Prop(프로퍼티)들을 다 부모 Component에서 받아온다. App.js로부터 받을 예정인 정보들인 것이다.

• App에서 넘긴 정보를 Movie 컴포넌트가 Prop으로 받아서 뿌린다.
• 원래는 위에서 map안의 map으로 반복이 중첩되어 있었는데 그걸 컴포넌트 두 개로 분리한 것이다.

• 그런데 unique한 key가 있어야 한다는 콘솔의 경고가 보인다.

• key는 리액트에서 map안에서 컴포넌트를 렌더링할 때 사용된다.
• key 속성을 추가했다.

• PropTypes를 지정해주었다.
• 그런데 왜 genres만 저런 형태인가?

• genres는 array 형태이기 때문이다.