React - Movie App(2)

react-router-dom

routes 폴더 생성하여 route 경로의 element가 될 파일을 넣는다
(Home.js, Detail.js)
components 폴더 생성하여 컴포넌트 파일 넣는다
(Movie.js)

<BrowserRouter> 일반적으로 쓰는 url형태
<Routes>는 Route(=url)을 찾으면 컴포넌트를 렌더링한다
/ : 메인화면은 <Home /> 컴포넌트가 출력되도록 설정
/movie : 영화의 상세설명이 출력될 <Detail />로 설정

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import Home from "./router/Home";

function App() {
  return(
    <BrowserRouter>
      <Routes>
      	<Route path="/movie" element={<Detail/>}/>
        <Route path="/" element={<Home/>}/>
      </Routes>
    </BrowserRouter>
  )
}

<Link>: 브라우저를 새로고침하지 않고 페이지를 이동할 수 있다
<a> 대신 <Link>를 사용하여 영화 제목을 클릭하면 상세 페이지로 이동하게 한다
<Link to="이동할 경로"> 클릭하면 상세화면이 보여야하므로(<Detail />) 경로를 "/movie"로 입력한다

<h2>
	<Link to="/movie">{title}</Link>
</h2>

movie의 id에 따라 맞는 내용의 화면을 출력
Router는 동적 url을 지원한다 == url에 변수를 넣을 수 있다
Route path에 /list/:id 처럼 : 뒤에 오는 단어는 변수 취급한다

<Route path="/movie/:id" element={<Detail/>}/>
  
<Link to={`/movie/${id}`}>

URL에서 넘겨주는 id값을 <Detail/> 가 받아야 한다
URL의 동적변수 id값은 useParams를 이용하면 얻을 수 있다

import { useParams } from "react-router-dom";

function Detail() {
    const x = useParams();
    ...

useParams()는 현재 URL에서 동적 매개 변수의 키/값 쌍의 개체를 반환한다.
키는 Route path에서 작성한 동적변수 이름과 동일하다

api를 이용하여 해당 id의 데이터를 가져온다
페이지가 시작할 때 한번만 가져오면 되므로 useEffect 사용

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