Next.js의 useRouter 완전 정복: 라우팅의 핵심 이해하기

Next.js의 useRouter 완전 정복: 라우팅의 핵심 이해하기

 

Next.js는 파일 기반 라우팅 시스템을 제공하며, 페이지 간 탐색과 동적 경로 처리에서 매우 강력한 기능을 지원합니다. 이 중심에는 useRouter 훅이 있습니다. Next.js를 활용한 프로젝트에서 useRouter는 라우팅 관련 작업을 처리할 때 핵심 역할을 담당합니다.

 

이번 글에서는 useRouter가 무엇인지, 어떻게 사용하는지, 그리고 실무에서 활용할 수 있는 다양한 방법과 주의점을 다뤄보겠습니다.

 

1. useRouter란?

 

useRouter는 Next.js에서 제공하는 라우터 객체에 접근할 수 있는 훅입니다. 페이지 이동, 현재 경로 정보, 쿼리 파라미터 접근 등을 포함한 다양한 라우팅 관련 기능을 제공합니다.

 

useRouter는 React의 useContext와 유사하게 Next.js 라우터 객체를 반환합니다. 이를 통해 프로그래밍 방식으로 라우팅을 제어하거나 경로 정보를 활용할 수 있습니다.

 

2. useRouter 사용법

 

useRouter는 Next.js에서 기본 제공되며, next/router 패키지에서 가져와 사용할 수 있습니다.

 

기본 사용 예제

 

import { useRouter } from 'next/router';

 

export default function Home() {

  const router = useRouter();

 

  const navigateToAbout = () => {

    router.push('/about'); // '/about' 경로로 이동

  };

 

  return (

    <div>

      <h1>홈 페이지</h1>

      <button onClick={navigateToAbout}>About 페이지로 이동</button>

    </div>

  );

}

 

위 예제에서 useRouter를 사용하여 router.push()를 호출함으로써 프로그래밍 방식으로 페이지를 이동시켰습니다.

 

3. useRouter의 주요 속성 및 메서드

 

useRouter로 반환된 라우터 객체는 다양한 속성과 메서드를 제공합니다. 주요 항목들을 하나씩 살펴봅시다.

 

3.1 속성

1. pathname

• 현재 경로를 나타냅니다.

• 예: /about

 

const router = useRouter();

console.log(router.pathname);

// '/about'

 

 

2. query

• URL에 포함된 쿼리 파라미터를 객체 형태로 반환합니다.

• 예: /product?id=123

 

const router = useRouter();

console.log(router.query);

// { id: '123' }

 

 

3. asPath

• 현재 URL의 전체 경로를 반환합니다.

• 쿼리 스트링 포함.

 

const router = useRouter();

console.log(router.asPath);

// '/product?id=123'

 

 

4. isReady

• 라우터가 완전히 초기화되었는지 여부를 나타냅니다.

• 주로 동적 경로나 클라이언트 측 탐색 시 유용합니다.

5. locale

• 현재 활성화된 언어 또는 로케일 정보를 반환합니다.

• 국제화(i18n)를 사용할 때 활용됩니다.

 

3.2 메서드

1. router.push(url, as, options)

• 페이지를 프로그래밍 방식으로 이동합니다.

• as는 URL 마스킹을 위한 경로를 지정.

• options에는 스크롤 방지 등 추가 설정 가능.

 

router.push('/about'); // 단순 이동

router.push('/product/[id]', '/product/123'); // 동적 경로

 

 

2. router.replace(url, as, options)

• push와 동일하지만, 히스토리를 덮어씁니다. 뒤로 가기를 방지하는 경우 사용.

 

router.replace('/login');

 

 

3. router.back()

• 브라우저의 뒤로 가기 동작과 동일.

 

router.back();

 

 

4. router.prefetch(url)

• 링크를 클릭하기 전에 페이지를 미리 로드.

• Next.js는 기본적으로 next/link에서 자동 프리페치를 수행하지만, 특정 상황에서 수동으로 호출 가능.

 

router.prefetch('/about');

 

4. 실전 예제

 

4.1 쿼리 파라미터 활용하기

 

동적 라우팅 및 쿼리 파라미터를 사용하는 경우:

 

import { useRouter } from 'next/router';

 

export default function ProductPage() {

  const router = useRouter();

  const { id } = router.query; // URL 쿼리에서 id 값 가져오기

 

  return <h1>Product ID: {id}</h1>;

}

 

URL: /product?id=101

결과: Product ID: 101

 

4.2 동적 경로와 함께 사용

 

파일 기반 라우팅에서 동적 경로([param])를 처리하는 방법:

 

pages/blog/[slug].js

 

import { useRouter } from 'next/router';

 

export default function BlogPost() {

  const router = useRouter();

  const { slug } = router.query;

 

  return <h1>Blog Post: {slug}</h1>;

}

 

URL: /blog/react-intro

결과: Blog Post: react-intro

 

4.3 다국어 지원 (i18n)

 

Next.js에서 다국어(i18n)를 설정한 경우 locale을 사용하여 현재 언어를 처리할 수 있습니다.

 

import { useRouter } from 'next/router';

 

export default function LocaleSwitcher() {

  const router = useRouter();

  const { locale, locales } = router;

 

  const switchLocale = (newLocale) => {

    router.push(router.pathname, router.asPath, { locale: newLocale });

  };

 

  return (

    <div>

      <p>현재 언어: {locale}</p>

      {locales.map((loc) => (

        <button key={loc} onClick={() => switchLocale(loc)}>

          {loc}

        </button>

      ))}

    </div>

  );

}

 

5. 활용 팁 및 주의사항

1. 서버 측에서 라우터 데이터 접근

• useRouter는 클라이언트 측에서만 동작합니다.

• 서버 측에서 라우팅 정보를 사용하려면 getServerSideProps 또는 getStaticProps에서 context 객체를 활용하세요.

2. 프리페치 최적화

• router.prefetch로 중요한 페이지를 미리 로드하면 UX를 크게 개선할 수 있습니다.

• 특히 사용자가 방문할 가능성이 높은 경로에서 활용하세요.

3. isReady 활용

• 동적 경로가 완전히 로드되지 않은 상태에서 라우터를 접근하면 undefined 값을 반환할 수 있습니다.

• 이를 방지하려면 isReady 상태를 체크하세요.

 

if (!router.isReady) return null;

 

 

4. push vs replace

• 뒤로 가기가 필요한 경우 push를 사용.

• 뒤로 가기가 필요 없는 경우(예: 로그인 후 홈 이동)에는 replace를 사용하는 것이 적합.

 

6. 결론

 

Next.js의 **useRouter**는 라우팅을 효과적으로 제어하고 동적 경로, 쿼리 파라미터, 다국어 지원 등 다양한 기능을 제공하는 강력한 도구입니다. 라우팅 작업은 단순히 URL 이동만이 아니라 사용자 경험을 설계하는 중요한 과정이니, useRouter의 다양한 메서드와 속성을 잘 활용해보세요.

 

🌷전설의 개발자가 되어봅시당!🌷