react. api 정보 가져오기

다양한 api 사이트에서 배열에 담긴 정보를 가져오는 법!

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

useEffect( )를 사용해서 fetch( ).then( ).then( ); 이런 식으로 가져와도 되지만 가독성을 위해 아래와 같이 async/await을 사용해 json으로 변환해서 가져온다.

 function App(){
     const [movies, setMovies] = useState([]);
      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();
      }, []);


     return (
       <div>
        {movies.map((movie) => (
          <img src={movie.cover_img} alt={title}/>
          <h2>{movie.title}</h2>
          <p>{movie.summary}</p>
        ))}
      </div>
     );
     // key값을 각각 줄 수 없으니 보통 컴포넌트 화 시켜서 한번에 key={movie.id}로 전달
 }

 

그 후 console에 json으로 변환한 movie를 찍어보고 배열 안의 속성 값을 이용해 return에 뿌려준다.(map함수 사용)

Movie.propsTypes = { } 도 정의해서 오류를 최소화 하자. import PropTypes from "prop-types";