[Next13 + TypeScript ] 프로젝트에서 동적라우팅 사용법

기본적인 정적 & 동적 라우팅에 대한 설명을 보고싶다면, 클릭 💻

app 폴더 > reservationcancel 폴더 > id 폴더

동적 라우팅은 웹 애플리케이션에서 URL의 일부를 동적으로 처리하고 해당 부분을 변수로 사용하는 기술이다.
보여주고자 하는 폴더 이름(reservationcancel)의 하위 폴더로 [id] 폴더를 만들어 준 후 이 안에 page.tsx 파일을 만들어주면 동적 라우팅을 사용할 수 있다.
[id] 폴더 이렇게 대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 제품 번호가 [ ] 안에 쓰여진 변수명에 담겨져 그 변수 안에 있는 데이터를 꺼내 조회할 수 있다.

해당 프로젝트에서 id에 따라서 동적 라우팅을 하게 만들었고

/components/mypages/reservationcancel 에 있는 ReservationCancelUI에게

params로 id 값을 넘겨주었다.

//page.tsx
import ReservationCancelUI from '@/components/mypages/reservationcancel';

const ReservationCancelPage = ({
  params: { id },
}: {

  params: { id: number };

}) => <ReservationCancelUI id={id} />;
export default ReservationCancelPage;

ReservationCancelUI 에선 ({ id }: { id: number }) 를 사용하면

const ReservationCancelUI = ({ id }: { id: number }) => {
  ... 
}  

동적 라우팅을 할 수 있다.