#7.6 Parameters

영화 목록 상세 내용을 불러올 수 있었다

다른 분들이 만든 멋진 화면들을 공유해본다

React App

 

https://brilliant-froyo-4c6888.netlify.app/

이분은 예고편까지 넣으셨다

React App

 

Detail.js

import { useParams } from "react-router-dom";
import { useEffect, useState } from 'react';

function Detail() {
  const { id } = useParams();
  const [movie, setMovie] = useState([]);

  const getMovie = async () => {
    const json = await (await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)).json();
    console.log(json);
    setMovie(json.data.movie);
  };

  useEffect(() => {
    getMovie();
  }, []);
  return <div>
    <h1>Movie</h1>
    <div>title: {movie.title_long}</div>
    <div><img src={movie.background_image_original} /></div>

    {movie.genres ?
      <div>
        genre: {movie.genres.map((genre) => <li>{genre}</li>)}
      </div>
      : null}

    <div><br /><strong>Description...</strong> <br />{movie.description_full}</div>
  </div>
}

// https://yts.mx/api/v2/movie_details.json?movie_id=

export default Detail;