[React] #7.6 Parameters

App.js

import { 
  BrowserRouter as Router,
  Switch,
  Route
 } from 'react-router-dom';
import Detail from './routes/Detail';
import Home from './routes/Home';

// :id 변수 id
function App() {
  return <Router>
      <Switch>
        <Route path='/hello'>
          <h1>Hello</h1>
        </Route>
        <Route path='/movie/:id'> 
          <Detail />
        </Route>
        <Route path='/'> 
          <Home />
        </Route>
      </Switch>
  </Router>; 
}
export default App;

 

Movie.js

import PropTypes from "prop-types";
import { Link } from "react-router-dom";

function Movie({ id, coverImg, title, summary, genres }) {// id를 prop으로 받기
    return (
    <div>
    <img src={coverImg} alt={title}/>
    <h2>
      <Link to={`/movie/${id}`}>{title}</Link>
    </h2>
    <p>{summary}</p>
    <ul>
      {genres.map((g)=>
        <li key={g}>{g}</li>
      )}
    </ul>
  </div>
  );
}

Movie.propTypes = {
    id: PropTypes.number.isRequired,
    coverImg: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie;

 

Detail.js

import { useEffect } from "react";
import { useParams } from "react-router-dom"; //url에 있는 변수값을 가져오는 함수

function Detail() {
    const {id} = useParams(); // url에 있는 id값 가져오기
    const getMovie = async() => { // id로 API로부터 해당 정보를 fetch해오기
        const json = await(await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`))
        .json();
        console.log(json);
    }
    
    useEffect(()=> {
       getMovie();
    }, []);

    return <h1>Detail</h1>; //To do - state에 json 저장해서 보여주기 
}
export default Detail;

console에 찍힌 json