useParams와 params의 차이

1. useParams:
   • 서버 사이드와 클라이언트 사이드에서 모두 사용 가능.
   • Next.js app 라우터에서 사용되며, URL 파라미터를 클라이언트와 서버에서 모두 추출할 수 있다.
   • **서버 사이드 렌더링(SSR)**에서 서버와 클라이언트 모두에서 동작한다.
   • 주로 클라이언트 사이드에서 URL 파라미터를 추출하는 데 사용되며, 서버 사이드에서도 URL 파라미터를 접근할 수 있다.
2. params:
   • 서버 컴포넌트에서만 사용 가능.
   • Next.js app 라우터의 서버 컴포넌트에서는 URL 파라미터를 직접 **params**로 받아올 수 있다.
   • 서버 컴포넌트에서 URL 파라미터를 직접 다룰 때 사용되며, 클라이언트에서는 사용할 수 없다.
   • 클라이언트 컴포넌트에서는 사용할 수 없고, 서버 컴포넌트에서만 유효하다.

예시:

• useParams (클라이언트 & 서버):
  • 서버와 클라이언트 모두에서 사용할 수 있기 때문에, 클라이언트 컴포넌트와 서버 컴포넌트에서 모두 사용 가능하다.

// 클라이언트/서버에서 사용 가능
import { useParams } from 'next/navigation';

const Component = () => {
  const params = useParams(); // URL 파라미터 추출
  return <div>{params.id}</div>;
};

 

params (서버에서만 사용):

• 서버 컴포넌트에서 URL 파라미터를 직접 다룰 수 있습니다. 클라이언트에서는 사용할 수 없다.

// 서버 컴포넌트에서만 사용
export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>;
}