Next.js의 params, loading

1. params

 Next.js의 동적 라우팅은 동적으로 생성된 URL 경로에서 매개변수를 받아와 사용하게 해준다. params는 동적 라우팅 페이지 컴포넌트로 전달되는 객체로, URL에서 가져온 동적 테이터를 담고 있다. params의 역할은 다음과 같다.

• URL의 경로 매개변수를 나타냄
• 동적 경로에 있는 값들을 params로 받게 됨
• 동적 세그먼트로부터 추출된 값이 key-value 쌍으로 저장되어 있음

 

예를 들어, app/test/[testId]/testtest/[privateId]/hahaha/page.tsx의 코드가 있다고 하자.

 

export default function Test({ params }: { params: any }) {
  console.log("params", params);

  return <div>Test!</div>;
}

 

console.log(params)의 출력 결과는 다음과 같다.

 

 

params에는 동적 경로에 있는 testId와 privateId가 string으로 저장되어 있다.

 

2. 로딩 UI

 Next.js에서 page.tsx와 같은 위치에 loading.tsx 파일을 생성하면 비동기 로딩 상태를 별도의 설정 없이 자동으로 처리할 수 있게 해준다. 예를 들어, 아래와 같은 page.tsx, loading.tsx 코드가 있다고 하자.

 

// page.tsx

async function getProduct() {
  await new Promise((resolve) => setTimeout(resolve, 10000));
}

export default async function ProductDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  const product = await getProduct();

  return <span>Product detail of the product {id}</span>;
}

 

// loading.tsx

export default function Loading() {
  return <div>Loading...</div>;
}

 

page.tsx에서는 10초동안 로딩 상태를 가지며, 이 때 page.tsx 파일의 컴포넌트 대신 loading.tsx 파일의 컴포넌트가 보이게 된다.