[노마드코더]내가 약했던 id값에 대한것(id이용법)

지금 하는 부분은

 

일단 내가 뭘 하고자 할때 어찌 건들여야할지 전혀 짐작이 안됬던 부분이다.

 

근데 이부분이 공부할때 잘 몰랐던 useParams랑 관계있는 거였다.

 

지금 내가 하는 작업은 일단 id값이 얼마인지 알아보는 작업이다.

 

detail컴포넌트에서 저걸 추가하면 된다. 

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

const x = useParams();
  console.log(x);

 

이렇게 된다.

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

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

  return <h1>detail다</h1>;
}

export default Detail;

 

x부분을 {id}로 바꾸면 숫자만 가져올수있다. 

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

function Detail() {
  const { id } = useParams();
  console.log(id);

  return <h1>detail다</h1>;
}

export default Detail;

 

---

그럼 이걸 API에 보낸다.

useEffect(() => {
    axios
      .get(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
      .then(res => console.log(res));
  }, []);

 

이렇게해서 확인하며 된다.

 

이제 나머지부분은 앞에서 했던 것과 같이 state만들고 해서 받은 데이터를 보여주면 된다.