인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다.
Full Stack 개발자님, 제안해드릴 수 있는 방법은 두 가지입니다.

첫 번째, params를 비동기 함수 내에서 사용하기 전에 대기하여야 합니다. 아래와 같이 await를 사용하여 params를 기다릴 수 있습니다.

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const resolvedParams = await params;

  return <div>
    {/* resolvedParams 사용 */}
  </div>
}

두 번째, params를 비동기적으로 받을 필요가 없는 경우, 단순히 타입을 Promise로 지정하는 것이 아니라 해당 객체를 직접 받도록 수정합니다.

export default function Page({
  params,
}: {
  params: { id: string };
}) {
  
  return <div>
    {/* params 사용 */}
  </div>
}

이를 통해 params를 사용해도 오류 없이 코드를 구현할 수 있습니다. 필요한 경우 두 가지 방법 중 해당하는 방법을 선택하여 사용하세요. 도움이 되길 바랍니다.
이미지 출처
Happy coding!