본문 바로가기
✍ 따뜻한 개발 공부

다이나믹 라우팅이란??

by 따따시 2023. 1. 31.

 

내가 강의를 들으며 느낀 다이나믹 라우팅?

서버에 요청하는 뒤의 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;

 

 

 

댓글