[React] Movie App 만들기!

기본 setting

 

 

import Button from "./Button";
import styles from "./App.module.css";
import {useState,useEffect} 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;
 

 

async - await 으로 구현해보기

 

import {useState,useEffect} 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;
 

 

useEffect 안에 디펜던시를 빈 배열로 설정해줌으로써 한번만 실행되게 하고 async await을 통해 api를 호출했다

 

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

이러면 console.log에 array가 두번 나오는데 setMovies 와 setLoading을 했기 때문이다. 

 

 

map안에 map 

 

map을 쓸 때 중요한 것은 고유의 key가 있어야 한다. 

map을 통해서 영화 제목, 영화 summary,영화 장르를 표현해줄건데 장르의 경우 배열안에 들어가 있다.

 

genres 배열을 map할 때 key로 id를 쓸 수 없다. 사실상 genres 배열 안에 장르 밖에 없고 고유 id이런게 없기 때문이다..! 이럴때는 그냥 장르에 해당하는 값(예를 들면 documentary)을 key로 줘도 된다. 어차피 key는 고유한 값이면 되기 때문이다. 

 

그래서 map안에 map을 하나 더 만든다. 가장 겉에 있는건 movie.map 속에 있는건 movie.genres.map

 

 

최종코드 

import {useState,useEffect} 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>:
    <div>
      {movies.map(movie=>
      <div key={movie.id}>
        <img src={movie.medium_cover_image}></img>
        <h2>💙{movie.title}💙</h2>
        <p>{movie.summary}</p>
        💛Genres
        <ul>
            
            {movie.genres.map((g)=>
            <li key={g}> {g}</li>
            
            )}
          
        </ul>
        
      </div>
      
      )}
    </div>}
    
  </div>);
 
}
 
export default App;