내가 강의를 들으며 느낀 다이나믹 라우팅?
서버에 요청하는 뒤의 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;
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
강의듣다가 갑자기 궁금해서 찾아본 개발세계(?)에서 deploy와 release의 차이점 (0) | 2023.02.01 |
---|---|
ISR (Incremental Static Regeneration) 적용해보깅 / SSR의 문제점에 해결책 끼얹기넹 (0) | 2023.02.01 |
SSR인지 CSR인지 확인하는 방법 ? / 개발자 도구에서 java Script 끄기 (0) | 2023.01.31 |
마크다운 정리 (0) | 2023.01.30 |
git stash 명령어 정리 (0) | 2023.01.30 |
댓글