[React] Movie App 만들기! (3) - 다이나믹 URL 만들기

 

동적 URL 만들기

 

 

리액트 라우터는 동적(다이나믹) URL을 지원한다!

동적이라는 것은 URL에 변수를 넣을 수 있다는 것이다!

변수를 넣어주기 위해서는 

 

유저가 movie로 가서 id를 입력하면 Detail을 보여주게 해보겠다.

 

App.js

 

콜론(:)과 함께 작성된 path는 params에서 변수로 읽어 들이게 된다

 

https://velog.io/@hwang-eunji/React-Route-%EA%B8%B0%EB%B3%B8%EC%84%A4%EC%A0%95

React Router 기본설정 & 유동라우터

 

이 id값이 Movie 컴포넌트와 Home 컴포넌트에 props로 들어와야 할거다. 그렇기에 우선 상위 컴포넌트인 Home부터 처리해주자.

 

 

 

Home.js

 

Movie 컴포넌트에 props로 보낼때 movie의 고유 id를 같이 보낸다. 

Movie.js

props로 id를 생성해준다음, 

Link를 통해  /movie/id가 url이 만들어질 때 이 id가 movie의 고유의 id로 들어올 수 있게 js 문법을 사용해준다!

 

 

만약 내가 이 movie title을 누르면 

url에 이 movie의 고유 id가 들어있는 것을 볼 수 있다. 

 

근데 id 값을 어떻게 알아낼 수 있을까?

이때는 useParams()를 이용하면 된다.

이 함수를 사용하면 React Router는 바로 변수의 값을 넘겨준다. 

 

결론적으로 우리가 id로 설정해놓은 그 영화 고유 id를 React Router에서도 id변수로 사용하고 있다.

 

 

++) useParams() 관련 에러

 

useParams()에서 변수 값 받을 때 console.log가 안됐다. 문제를 찾아보니 리액트 버전이 안맞아서 6버전으로 올렸고 ㄴSwitch를 Routes로 바꿔줬는데 UI가 보이지 않는다... 왜일까..

 

npm i 여러번하면서 package.json에 react-router-dom을 다시 5.3버전으로 내려주니까 어찌저찌 되는 것 같다.

특히 package-locked.json에 react-router-dom 버전을 보는 것이 좋다..!!

 

https://han-py.tistory.com/433

[react] router 버전 해결 (react-router-dom)

날 구해준 구원자 님의 글이다.💛💛💛

---

오 id 값이 뜨는 것을 확인 할 수 있다.

 

useParams를 통해 id 값이 변수로 넘어가면 (앞에서 콜론(:)과 함께 작성된 path는 params에서 변수로 읽어 들이게 된다고 했음) 이 id 값에 해당하는 애를 fetch를 통해 api에 id 자리에 넣어줌으로써 영화의 detail한 정보를 알려준다. 

 

 

최종코드

 

 

import { useEffect,useState } from "react";
import {  useParams } from "react-router-dom";
 
function Detail(){
    const [movies,setMovies]=useState("");
    const {id} =useParams();
    const getMovie=async()=>{
        const json=await (
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`))
        .json();
        console.log(json.data.movie);
        setMovies(json.data.movie);
 
    };
    useEffect(()=>{
        getMovie();
       
    },[]);
 
 
    return <div>
       <h1>🧡{movies.title}🧡</h1>
       <ul>
           <img src={movies.medium_cover_image}></img>
       </ul>
 
        
        
 
    </div>;
}
 
export default Detail;