Dynamic routes

Heewon👩🏻‍💻·2024년 5월 13일
0

Dynamic routes가 뭐냐?

정적 routes가 아니야.
예를들어.. /about-us 처럼 정해진 url폴더 파일이 아닌거.
동적으로...
/movie/12312312 < 유저가 넣는 파라미터가 들어가지는거..
react로따지면 </movies/:id> -----> <Movie/> 뭐 이런식으로 만들어지는거지.

Next js에서는 파일시스템으로 만들꺼임. 왜냠 그게 규칙이라서 ㅎ

동적으로 변하는 부분에 "[]"를 넣고 이름을 지정해주면된다.

암거나 넣어도 not found페이지가 아닌 지정 폴더가 나오는걸 알 수 있다.
ㅇㅋ 일단 "[]"를이용해서 url를 동적으로 만드는건 알겠음.
그럼.. 데이터를 잡아오는건(fetch data) 어케할까?
영화세부정보 page에서 어떤 prop을 받아오는지 console.log에 찍어보면 알 수 있다.

export default function MovieDetail(props) {
  console.log(props);
  return <h1>Movie Detail</h1>;
}

백엔에서 실행되서 내부 terminal에 실행결과를 볼 수 있다.

id의 객체를 얻은걸 확인할 수 있다!
http://localhost:3000/movies/234234234234?location=kr 주소창에 일케 검색하면 검색페이지(searchParams)까지 구축해주는걸 확인가능. 개미친 프레임워크 ㅡㅡ 짜증날라하네..

지금 필요한건 params닌까 다시 세부정보 페이지코드에 props부분을 바꿔줘야댐

export default function MovieDetail({params:{id}}) {
  console.log(props);
  return <h1>Movie Detail {id}
</h1>;
}

url과 movie {id} 결과확인..

profile
Interested in coding, meat lover, in love with dogs , enjoying everything happens in my life.

0개의 댓글