영화 앱 만들기 (1)

...
          {movies.map((movie) => (
            <div key={movie.div}>
              <img src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              ...

1. 앱 안에서 페이지를 전환하는 법

 

- 로딩화면과 object 받아오기

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    fetch(
      "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
    )
      .then((response) => response.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);
  console.log(movies);
  return <div>{loading ? <h1>Loading ... </h1> : null}</div>;
}

export default App;

 

2. then 대신 async-await 사용하기

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const response = await fetch(
      "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  console.log(movies);
  return <div>{loading ? <h1>Loading ... </h1> : null}</div>;
}

export default App;

여기서 더 짧은 코드를 원하는 경우 아래와 같이 수정할 수 있다.

  const getMovies = async () => {
    const json = await (
      await fetch(
        "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
      )
    ).json();

    setMovies(json.data.movies);
    setLoading(false);
  };

 

3. loading 화면 이후 movie 화면 보이도록하기

- {} 안이면 다시 {}를 해주지 않아도 된다.

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.5&sort_by=year"
      )
    ).json();

    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  console.log(movies);
  return (
    <div>
      {loading ? (
        <h1>Loading ... </h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.div}>
              <h2>{movie.title}</h2>
              <p>{movie.summery}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

map 사용 시 key를 꼭 넣어줘야한다.

 

 

4. 이미지 가져오기

          {movies.map((movie) => (
            <div key={movie.div}>
              <img src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              ...