useRouter

Use App Router: useRouter

useRouter는 Next.js에서 제공하는 Hook 중 하나로, 현재 페이지의 라우터 정보를 가져올 수 있게 해주는 기능입니다. 이 Hook을 사용하면 현재 페이지의 URL, 쿼리 파라미터, 라우트 매개변수 등과 같은 라우터 정보에 접근할 수 있습니다. useRouter를 사용하여 현재 페이지의 라우터 정보를 가져와서 해당 정보를 기반으로 동적으로 컴포넌트를 렌더링하거나 상태를 업데이트하는 등 다양한 작업을 수행할 수 있습니다.

useRouter Hook을 사용하려면 먼저 next/router 모듈에서 useRouter를 import해야 합니다.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  // 현재 페이지의 경로를 가져옴
  const currentPath = router.pathname;

  // 쿼리 파라미터를 가져옴
  const query = router.query;

  // 라우트 매개변수를 가져옴
  const { id } = router.query;

  return (
    <div>
      <h1>Current Path: {currentPath}</h1>
      <h2>Query: {JSON.stringify(query)}</h2>
      <h2>ID: {id}</h2>
    </div>
  );
}

export default MyComponent;

좀 더 활용 할 수 있는 자세한 예시를 들어보면 다음과 같습니다.

• 현재 페이지의 URL: useRouter를 사용하여 현재 페이지의 경로를 가져올 수 있습니다. 이를 활용하여 특정 경로에 따라 다른 컴포넌트를 렌더링하거나 페이지의 특정 부분을 강조 표시하는 등의 작업을 수행할 수 있습니다.

• 쿼리 파라미터: useRouter를 통해 쿼리 파라미터에 접근할 수 있습니다. 쿼리 파라미터는 URL에 추가 정보를 전달하기 위해 사용되며, 예를 들어 검색 결과를 필터링하거나 정렬하는 데 사용될 수 있습니다. 쿼리 파라미터를 활용하여 동적인 데이터 로딩이나 페이지 상태 업데이트 등을 처리할 수 있습니다.

• 라우트 매개변수: Next.js의 동적 라우팅 기능을 사용하면 경로에서 변수를 추출하여 라우트 매개변수로 사용할 수 있습니다. useRouter를 사용하여 라우트 매개변수에 접근할 수 있으며, 이를 통해 동적인 경로에 대한 데이터 로딩이나 컴포넌트 렌더링에 활용할 수 있습니다.

위의 정보들을 활용하여 Next.js 애플리케이션을 개발할 때 페이지 간의 상태 공유, 동적인 데이터 로딩, 조건부 렌더링, 필터링 및 정렬, SEO-friendly URL 등 다양한 기능을 구현할 수 있습니다. Next.js는 이러한 기능을 효율적이고 간편하게 다룰 수 있도록 제공합니다.