✍ 따뜻한 개발 공부
다이나믹 라우팅이란??
따따시
2023. 1. 31. 20:54
내가 강의를 들으며 느낀 다이나믹 라우팅?
서버에 요청하는 뒤의 url이 유동적(동적)으로 바뀌는 방식을 뜻하는 것
(다이나믹 라우팅 방식)
폴더에 요렇게 우리가 리액트 라우터 설정할때 :id 이런식으로 붙였던 것처럼
[pid] , [id] 등으로 설정을 해줌
import { useRouter } from "next/router";
const Post = () => {
// 뒤의 아이디값 /post/23 이런거
// 을 가져올 수 있는 방법 : useRouter 사용하기
const router = useRouter();
// pid말고 id로 해도 됌
const { pid } = router.query;
console.log("router.query:", router.query);
return (
<div>
{/* 이런걸 다이나믹 라우트라고 하넹 */}
<h3>여기는 Post 페이지라능</h3>
<h3>pid:{pid}</h3>
</div>
);
};
export default Post;
>> 파일 기반의 라우팅의 단점은?!
만약, post방식의 값들이 100가지가 넘는다면?
그때마다 파일을 추가시켜줘야할 순 없다.
이런 경우를 위해 next는 _다이나믹 라우트_를 지원한다.
[pid].js <- 이런식으로 작성
>> 다이나믹 라우팅??
import { useRouter } from "next/router";
const Post = () => {
// 뒤의 아이디값 /post/23 이런거
// 을 가져올 수 있는 방법 : useRouter 사용하기
const router = useRouter();
// pid말고 id로 해도 됌
const { pid } = router.query;
console.log("router.query:", router.query);
return (
<div>
{/* 이런걸 다이나믹 라우트라고 하넹 */}
<h3>여기는 Post 페이지라능</h3>
<h3>pid:{pid}</h3>
</div>
);
};
export default Post;