useRouter를 사용해 페이지 이동 처리하기

안녕하세요 :)

 

Next.js는 React를 기반으로 한 인기 있는 프레임워크로, 간단하면서도 강력한 라우팅 기능을 제공합니다. 특히, Next.js의 useRouter는 클라이언트 사이드 네비게이션과 경로 정보를 관리하는 데 있어 매우 유용한 툴인데요!

https://www.youtube.com/watch?v=JtvUBiNgyDg

이번 글에서는 useRouter가 무엇인지, 그 기능들은 무엇이 있는지 살펴보도록 하겠습니다.

라우팅의 간단한 개념

라우팅(Routing)이란, 특정 URL 경로에 따라 해당하는 페이지나 컴포넌트를 보여주는 과정입니다. Next.js는 파일 기반 라우팅(File-Based-Routing)을 지원하여 각 파일이 URL 경로로 자동 매핑되게 됩니다. 

https://www.cisco.com/c/en/us/products/routers/what-is-routing.html

 

(라우팅에 대해 더 궁금하시다면 ->

https://jinuk-io.tistory.com/entry/%EB%9D%BC%EC%9A%B0%ED%8C%85Routing%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

)

 

Next.js의 파일 기반 라우팅?

파일 기반 라우팅은 라우팅을 간단하게 설정할 수 있도록 돕는 Next.js만의 기능입니다. 각 파일을 특정 URL 경로에 자동으로 매핑하기 때문에 별도의 라우팅 설정이 필요 없습니다.

https://medium.com/yavar/what-is-file-based-routing-in-nextjs-1-8fe2dc63efdc

 

Next.js의 라우팅

Next.js 라우팅의 특징으로는,

• 정적 경로: /about -> pages/about.js
• 동적 경로: /post/[id] -> pages/post/[id].js

으로 볼 수 있습니다. 간략히 설명을 덧붙이자면,

 

[ 정적 경로 ]

• URL이 고정된 경로로 특정 파일에 직접 매핑됩니다.
• /about URL에 접근하면 about.js 파일의 내용을 렌더링합니다. 
• 특징으로는
  
  • 사용자가 입력한 경로와 파일 이름이 정확히 일치해야 하는 점을 주의해야 합니다.
  • 주로 고정된 정보(소개 페이지, 연락처 페이지 등)에 사용됩니다.

[ 동적 경로 ]

• URL의 일부를 변수처럼 사용하여 여러 경로를 처리할 수 있습니다.
• 예를 들어, /post/[id].js는 /post/123 또는 /post/abc와 같은 다양한 URL을 처리합니다.
• 여기서 [], 대괄호 안의 값이 동적 변수로 사용되는 것이죠.
• 특징으로는,
  • 다양한 데이터를 처리해야 할 때 유용합니다. 블로그 게시글이나, 제품 상세 페이지에 많이 사용되고 있습니다.
  • 변수 값은 params 객체를 통해 컴포넌트에서 접근할 수 있습니다.
  • (• params는 Next.js에서 동적 경로 값을 전달하기 위해 사용하는 객체입니다)
• 코드로 보면,

// pages/post/[id].js
import { useRouter } from 'next/router';

export default function Post(){
    const router = useRouter();
    const { id } = router.query; // 클라이언트 측에서 URL 동적 값 id 가져오기
    
    return (
        <h1>Post: ID: {id}</h1>
    )
}

 

이렇게 될 수 있습니다. 자세한 이해를 위해 useRouter에 대해 알아보도록 하겠습니다.

 

useRouter란?

useRouter는 Next.js에서 제공하는 Hooks입니다. React Hooks과 햇갈리실텐데, 전혀 다른 훅입니다. useRouter는 현재 경로 및 쿼리 정보를 가져오고 페이지 이동을 처리할 수 있게 합니다. 

from Next.js(official)

 

위에서 봤던 예제에서는 router.query를 통해 URL의 동적 id값을 가져왔습니다. 하지만 useRouter는 단순히 동적 값을 가져오기 외에도, 페이지 이동, 현재 경로 확인, 쿼리 파라미터 처리 등 다양한 기능을 제공합니다.

 

useRouter의 주요 기능들

useRouter의 기능들은 크게 다섯 가지 역할로 나눌 수 있습니다. 하나씩 살펴보겠습니다.

 

페이지 이동하기

1. router.push()

• 브라우저의 history에 새 경로를 추가하여 페이지를 이동합니다.
• 브라우저 history란?
  • 브라우저 history는 사용자가 웹 브라우저에서 방문한 웹 페이지들의 기록을 의미합니다.
  • 사용자가 이전에 방문한 사이트를 쉽게 다시 찾거나, 웹 내 탐색을 다시 이어갈 수 있도록 돕는 기능입니다.
• 언제 사용되나요?
  • 새로운 페이지로 이동해야 하지만, 뒤로가기 버튼으로 이전 페이지로 돌아갈 수 있어야 할 때 사용됩니다.
  • 예를 들어, 목록 페이지에서 상세 페이지로 이동하는 상황이 있습니다.
• 어떻게 뒤로가기 버튼으로 이전 페이지로 돌아갈 수 있을까요?
  • router.push()는 브라우저 history에 새로운 경로를 추가한다고 했죠?
  • 즉, 사용자가 이동한 페이지가 브라우저의 "방문 기록 스택"에 쌓이게 됩니다.
  • 따라서 사용자가 뒤로가기 버튼을 누르면 브라우저는 기록 스택에서 이전 페이지를 가져와 이동할 수 있게 되는 것입니다.
• 코드로 보면,

import { useRouter } from 'next/router';

export default function Navigation() {
    const router = useRouter();
    
    const goToAboutPage = () => {
        router.push('/about'); // 'about'페이지로 이동
    };
    
    return(
        <button onClick = { goToAboutPage }> About 페이지로 이동</button>
    )
}

1. 현재 경로 : /home
2. 버튼 클릭 -> /about 경로로 이동 -> 기록 스택: [ '/home ', '/about' ]
3. 뒤로 가기 버튼 -> /home으로 돌아갈 수 있음

 

 

2. router.replace()

• 브라우저의 기록을 대체하여 페이지를 이동합니다.
• 언제 사용되나요?
  • 이동 후 뒤로가기를 눌렀을 때 이전 페이지로 돌아가면 안 되는 경우에 사용됩니다.
  • 예를 들어, 로그인 페이지에서 로그인 후 대시보드로 리다이렉트 시킬 때 사용됩니다. 다시 로그인 페이지로 돌아가면 안 되잖아요?
• 왜 뒤로가기 버튼으로 이전 페이지로 돌아갈 수 없을까요?
  • router.replace()를 사용하면 뒤로가기가 불가능합니다. 
  • 왜냐하면, 기존 경로를 새로운 경로로 덮어쓰므로, "방문 기록 스택"에 새로운 기록이 추가되지 않습니다.
  • 결과적으로 사용자가 뒤로가기 버튼을 눌러도 이전 페이지로 돌아갈 수 없게 되는 것이죠.
• 코드를 보면,

import { useRouter } from 'next/router';

export default function Example() {
  const router = useRouter();

  const goToDashboard = () => {
    router.replace('/dashboard'); // '/dashboard' 경로로 대체
  };

  return (
    <div>
      <button onClick={goToDashboard}>Dashboard 페이지로 이동</button>
    </div>
  );
}

1. 현재 경로: /home
2. 버튼 클릭 -> /dashboard로 이동 -> 기록 스택: [ '/dashboard' ]
3. 뒤로 가기 버튼 -> 브라우저 history에 /home이 존재하지 않으므로 이동 불가능

 

router.push()와 router.replace()를 요약 비교하면 다음과 같습니다.

메서드	뒤로가기 가능 여부	작동 방식	사용 상황
router.push()	가능	새로운 경로를 history에 추가	사용자가 이전 페이지로 돌아갈 가능성이 있는 경우
router.replace()	불가능	기존 경로를 새로운 경로로 대체하고, 기존 스택을 덮어씀	이전 페이지로 돌아가는 것이 불필요하거나 비논리적인 경우

 

현재 경로 확인하기

3. router.pathname

• 동적 경로를 포함한 현재 URL 경로를 확인합니다.
• 언제 사용하나요?
  • 현재 경로에 따라 UI를 다르게 표시해야 할 때
  • 예를 들어, 네비게이션 메뉴에서 활성화된 페이지를 강조해야 할 때 사용할 수 있습니다.
• 코드를 보면,

import { useRouter } from 'next/router';

export default function Navigation() {
  const router = useRouter();

  // 현재 경로와 비교하여 활성화된 메뉴 스타일 설정
  const isActive = (path) => router.pathname === path;

  return (
    <nav style={{ display: 'flex', gap: '20px' }}>
      <a
        href="/"
        style={{
          color: isActive('/') ? 'blue' : 'black',
          fontWeight: isActive('/') ? 'bold' : 'normal',
        }}
      >
        Home
      </a>
      <a
        href="/about"
        style={{
          color: isActive('/about') ? 'blue' : 'black',
          fontWeight: isActive('/about') ? 'bold' : 'normal',
        }}
      >
        About
      </a>
      <a
        href="/contact"
        style={{
          color: isActive('/contact') ? 'blue' : 'black',
          fontWeight: isActive('/contact') ? 'bold' : 'normal',
        }}
      >
        Contact
      </a>
    </nav>
  );
}

1. useRouter 사용
   • router.pathname이 현재 경로를 가져옵니다.
2. isActive 함수
   • 매개변수로 경로를 받아 현재 경로와 일치하는지 비교합니다.
   • 만약, 경로가 일치하면 해당 경로를 활성화된 상태로 간주합니다.
3. 스타일 적용
   • isActive 결과에 다라 활성화된 메뉴는 스타일에 적용된 파란색과 굵은 글씨로 표시됩니다.
   • 비활성화된 메뉴는 기본 스타일로 표시됩니다.
4. 예상 동작을 덧붙이자면,
   • Home: 검정색, 일반 글씨
   • About: 파란색, 굵은 글씨
   • Contact: 검정색, 일반 글씨

• 동적 경로를 포함한 경우의 코드도 볼까요?

<a
  href="/post/[id]"
  style={{
    color: isActive('/post/[id]') ? 'blue' : 'black',
    fontWeight: isActive('/post/[id]') ? 'bold' : 'normal',
  }}
>
  Post
</a>

위 코드는 동적 경로에서 router.pathname을 활용해 활성화된 링크를 표시할 수 있습니다. 

 

 

4. router.asPath

• 쿼리 파라미터를 포함한 전체 URL을 확인합니다.
• 언제 사용할까요?
  • URL에 포함된 모든 정보를 기반으로 조건을 처리해야 하는 상황에 쓰입니다.
  • 예로, 특정 쿼리 파라미터에 따라 데이터를 필터링 해야 하는 상황을 들 수 있습니다.
• 코드를 보면,

import { useRouter } from 'next/router';

export default function ProductList() {
  const router = useRouter();

  // 쿼리 파라미터 추출
  const currentFilter = router.asPath.split('?')[1]; // URL에서 ? 이후의 쿼리 파라미터 추출

  // 가상의 데이터
  const products = [
    { id: 1, name: 'Laptop', category: 'electronics' },
    { id: 2, name: 'Chair', category: 'furniture' },
    { id: 3, name: 'Camera', category: 'electronics' },
    { id: 4, name: 'Table', category: 'furniture' },
  ];

  // 필터링 로직
  const filteredProducts =
    currentFilter && currentFilter.startsWith('category=')
      ? products.filter(
          (product) => product.category === currentFilter.split('=')[1]
        )
      : products;

  return (
    <div>
      <h1>Product List</h1>
      <p>현재 필터: {currentFilter || '없음'}</p>
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

1. router.asPath로 전체 URL 확인
   • router.asPath는 쿼리 파라미터를 포함한 전체 경로를 제공합니다. 
   • 예를 들면, URL이 /products?category=electronics라고 가정했을 때, router.asPath는 " /products?category=electronics"를 반환하는 것이죠.
2. 쿼리 파라미터 추출
   • router.asPath.split('?')[1]로 URL의 쿼리 부분을 추출합니다.(category=electronics)
3. 데이터 필터링
   • 쿼리 파라미터 값(category=...)에 따라 데이터를 필터링합니다.
   • products.filter(...)을 사용해 데이터 중 category가 일치하는 항목만 선택합니다.
4. 기본 처리
   • 쿼리 파라미터가 없으면 모든 데이터를 표시합니다.
5. 예상 동작을 덧붙이자면, 
   • URL이 /products인 경우: currentFilter는 undefined
   • URL이 /products?category=electronics인 경우: currentFilter는 "category=electronics".
   • URL이 /products?category=furniture인 경우: currentFilter는"category=furniture".

 

쿼리 파라미터 처리

5. router.query

• URL의 쿼리 파라미터와 동적 경로 값을 객체 형태로 가져옵니다.
• 언제 사용할까요?
  • 주로 URL에 포함된 정보를 기반으로 데이터 요청이나 UI를 업데이트해야 할 때 사용합니다.
  • 예를 들면, 특정 게시글이나 상품의 ID를 URL에서 가져와 상세 정보를 표시할 때 사용합니다.
• 코드를 보면,

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function PostDetail() {
    const router = useRouter(;
    const { id, author } = router.query; // 동적 경로와 쿼리 파라미터 추출
    const [ post, setPost ] = useState(null); // 게시글 데이터를 저장할 때 상태 초기화 (기본값: null)
    
    // id 값이 준비 되었을 때 API를 호출하여 게시글 데이터를 가져오는 로직
    useEffect(() => {
        if (id) {
        // API 요청으로 게시글 상세 정보 가져오기 : /api/posts/{id} 경로에서 게시글 데이터를 가져옴.
        fetch(`/api/posts/${id}`)
            .then((res) => res.json()) // 응답 데이터를 json으로 반환
            .then((data) => setPost(data)) // 가져온 데이터를 post 상태에 저장
            .catch((err) => console.error('Failed to fetch post: ', err)); // 에러 처리
        }
    }, [id]); // id값이 변경될 때마다 실행
    
    if (!id) return <p> Loading... </p> // id 값이 준비되지 않으면 로딩 중 표시
    
    return (
    <div>
      <h1>Post Detail</h1>
      {post ? (
        {* post 데이터가 있을 경우 제목, 내용, 작성자 정보를 표시 *}
        <div>
          <h2>제목: {post.title}</h2>
          <p>내용: {post.content}</p>
          <p>작성자: {author || '알 수 없음'}</p>
        </div>
      ) : (
        {* post 데이터가 아직 없을 경우 로딩 메시지 표시 *}
        <p>Loading post data...</p>
      )}
    </div>
  );
    
}

1. router.query
   • URL에서 id(동적 경로)와 author(쿼리 파라미터) 값을 추출합니다. 
   • 예를 들면, URL이 /post.123?author=John에서 id=123, author=John을 추출하는 것이죠
2. useState
   • post 상태는 API에서 가져온 게시글 데이터를 저장합니다.
   • 기본값을 null로 설정하여 데이터가 없을 때와 있는 경우를 구분합니다.
3. useEffect
   • id 값이 변경될 때마다 실행됩니다.
   • id가 있을 경우 API요청을 통해 게시글 데이터를 가져옵니다.
4. 조건부 렌더링
   • !id: 아직 동적 경로 값(id)이 준비되지 않았으면 로딩 메시지를 표시합니다.
   • post: API 데이터를 성공적으로 가져왔을 때 게시글 정보를 렌더링합니다.
   • 데이터가 없을 경우 대체 메시지를 표시

 

라우팅 이벤트 처리

6. router.events

• 경로 변경 시작과 완료 시 이벤트를 감지합니다.
• 언제 사용하나요?
  • 페이지 이동 중 로딩 상태를 표시해야 할 때 사용합니다.
  • 경로 변경 중에는 로딩 스피너를 표시하는 예시가 대표적이죠.
• 어? Next.js가 경로가 변경되었다는 것을 어떻게 아나요?
  • Next.js는 router.events를 통해 라우팅 상태 변경 이벤트를 감지합니다.
  • 이벤트 발생 시, 새로운 경로와 현재 경로를 비교하여 경로가 변경되었는지 판단하죠.
  • 예를 들어,router.push('/about')가 호출되면 내부적으로 Next.js가 이를 감지하고 routeChangeStart → routeChangeComplete 이벤트를 발생시킵니다.
• 코드를 보면,

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function RouteEventExample(){
    const router = useRouter();
    const [loading, setLoading] = useState(false); //로딩 상태 관리
    
    useEffect(() => {
        // 경로 변경 시작 이벤트
        const handleStart = () => setLoading(true);
        
        // 경로 변경 완료 또는 에러 이벤트
        const handleComplete = () => setLoading(false);
        
        // 이벤트 등록
        router.events.on('routeChangeStart', handleStart);
        router.events.on('routeChangeComplete', handleComplete);
        router.events.on('routeChangeError', handleComplete);

        // 이벤트 제거 (클린업)
        return () => {
          router.events.off('routeChangeStart', handleStart);
          router.events.off('routeChangeComplete', handleComplete);
          router.events.off('routeChangeError', handleComplete);
        };
      }, [router]);
      
      return (
        <div>
          <h1>Next.js Routing Events Example</h1>
          {loading && <p>로딩 중입니다...</p>} {/* 로딩 상태일 때 표시 */}
          <p>페이지를 이동하면 로딩 상태가 표시됩니다.</p>
        </div>
      );
}

1. useState로 로딩 상태 관리
   • loading 상태를 true 또는 false로 설정하여 로딩 여부를 제어합니다.(초기값은 false)
2. router.events 이벤트 감지
   • routeChangeStart: 경로 변경이 시작될 때 호출됩니다. 이 시점에 로딩 상태를 true로 설정합니다.
   • routeChangeComplete: 경로 변경이 완료되었을 때 호출됩니다. 이 시점에 로딩 상태를 false로 설정합니다.
   • routeChangeError: 경로 변경 중 에러가 발생했을 때 호출됩니다. 이 시점에도 로딩 상태를 false로 설정합니다.
3. 이벤트 등록과 제거
   • router.events.on으로 이벤트를 등록하고, router.events.off로 이벤트를 제거하여 메모리 누수를 방지합니다.
   • 이는 컴포넌트가 언마운트될 때 자동으로 실행됩니다.
4. 로딩 상태 표시
   • loading이 true일 때 '로딩 중입니다...'라는 텍스트를 화면에 표시합니다.
   • 실제 프로젝트에서는 이 부분에 로딩 스피너를 사용할 수 있습니다.

기타 기능들 

7. router.prefetch()

• 정적 페이지를 미리 로드하여 페이지 이동 속도를 높입니다.
• 언제 사용할까요?
  • 사용자가 자주 이동할 가능성이 높은 경로를 미리 로드하고자 할 때 사용합니다.
  • 마우스오버된 링크의 페이지를 미리 로드하는 방식으로 사용할 수 있습니다.
• 코드를 보면,

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function PrefetchExample() {
  const router = useRouter();

  const handleMouseEnter = () => {
    // '/about' 페이지를 미리 로드
    router.prefetch('/about');
  };

  return (
    <div>
      <h1>Next.js Prefetch Example</h1>
      <p>링크 위에 마우스를 올리면 페이지를 미리 로드합니다.</p>
      <a
        href="/about"
        onMouseEnter={handleMouseEnter} // 마우스 오버 이벤트로 사전 로드 실행
        style={{ color: 'blue', textDecoration: 'underline', cursor: 'pointer' }}
      >
        About 페이지로 이동
      </a>
    </div>
  );
}

1. router.prefetch()
   • router.prefetch('/about')는 정적 페이지를 미리 로드하여 사용자가 이동할 때 더 빠르게 렌더링될 수 있도록 돕습니다.
2. 마우스 오버 이벤트
   • <a> 태그의 onMouseEnter 이벤트를 사용하여 사용자가 링크 위에 마우스를 올리면 router.prefetch()를 호출하게 됩니다.
3. 링크 이동
   • 사용자가 링크를 클릭하여 /about 경로로 이동할 때, 해당 페이지가 이미 로드된 상태이므로 더 빠르게 화면이 전환됩니다.

• 위 코드의 실제 동작을 보면,
  • 현재 페이지: /home
  • 사용자가 /about 링크 위에 마우스를 올리면, router.prefetch('/about') 가 호출이 되고, /about 페이지가 백그라운드에서 로드됩니다.
  • 사용자가 /about 링크를 클릭하면 이미 /about 페이지가 로드된 상태이므로 즉시 이동이 가능합니다.
• 미리 로드되는 걸 이용해서 이런 것도 가능합니다.

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function MultiPrefetchExample() {
  const router = useRouter();

  const prefetchAllPages = () => {
    // 여러 페이지를 미리 로드
    router.prefetch('/about');
    router.prefetch('/contact');
    router.prefetch('/products');
  };

  return (
    <div>
      <h1>Multi Prefetch Example</h1>
      <button onMouseEnter={prefetchAllPages}>
        네비게이션 메뉴 열기 (페이지 미리 로드)
      </button>
      <nav>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
        <a href="/products">Products</a>
      </nav>
    </div>
  );
}

• 사용자가 특정 링크를 클릭할 가능성이 높을 때 페이지를 미리 로드하여 전환 속도를 개선할 수 있고,
• 특히, 초기 로딩 시간이 길거나 대규모 데이터를 렌더링해야 하는 페이지에서 유용합니다.
• Next.js는 동적 경로가 아닌 정적 경로에 대해서만 prefetch를 지원하므로, 불필요한 데이터 요청을 최소화할 수 있습니다.

 

8. router.back()

• 브라우저의 뒤로가기 버튼과 동일하게 동작합니다.
• 언제 사용하나요?
  • 이전 페이지로 이동해야 하는 네비게이션 기능을 제공할 때 사용합니다.
  • 사용자가 상세 페이지에서 목록 페이지로 돌아가도록 할 때 등 사용 가능합니다.
• 코드를 보면,

import { useRouter } from 'next/router';

export default function DetailPage() {
  const router = useRouter();

  const goBack = () => {
    router.back(); // 브라우저의 뒤로가기 동작과 동일하게 이전 페이지로 이동
  };

  return (
    <div>
      <h1>상세 페이지</h1>
      <p>이곳은 특정 항목의 상세 정보를 보여주는 페이지입니다.</p>
      <button onClick={goBack} style={{ padding: '10px', background: 'blue', color: 'white', border: 'none', borderRadius: '5px' }}>
        이전 페이지로 돌아가기
      </button>
    </div>
  );
}

1. router.back() 호출
   • 브라우저의 뒤로가기 버튼과 동일하게 동작합니다.
   • 이전 페이지가 기록에 있다면 해당 페이지로 이동합니다.
2. 버튼으로 뒤로가기 구현
   • 버튼 클릭 시 onClick 이벤트를 통해 router.back()을 호출합니다.
3. 유저 경험 개선
   • 사용자가 상세 페이지에서 이전 목록 페이지로 돌아가고자 할 때 유용합니다.

• 실제 동작 흐름을 보면,
  • 현재 페이지: /list
  • 사용자가 목록에서 특정 항목을 클릭하여 /detail로 이동
  • 상세 페이지에서 "이전 페이지로 돌아가기" 버튼 클릭하면
  • router.back() 호출 -> 브라우저가 /list 페이지로 이동

 

한 번에 보기

useRouter 기능 요약표

기능	설명	사용 상황
router.push()	브라우저 기록에 새로운 경로를 추가하여 이동	새로운 페이지로 이동하되, 뒤로가기가 가능해야 할 때
router.replace()	브라우저 기록을 대체하며 페이지 이동(뒤로가기 안됨)	기록을 남기지 않고 이동해야 할 때
router.pathname	현재 URL 경로를 반환(동적 경로 포함)	현재 경로를 따라 UI를 변경해야 할 때
router.asPath	쿼리 파라미터를 포함한 전체 URL 반환	URL 전체 정보를 기반으로 조건을 처리해야 할 때
router.query	URL의 쿼리 파라미터와 동적 경로 값을 객체 형태로 반환	URL에서 데이터를 추출하여 조건 처리나 데이터 요청을 해야 할 때
router.prefetch()	특정 경로의 정적 페이지를 미리 로드하여 페이지 이동 속도 향상	사용자가 자주 이동할 경로를 미리 로드해야 할 때
router.back()	브라우저의 뒤로가기 버튼과 동일하게 동작	이전 페이지로 돌아가는 네비게이션 기능이 필요할 때
router.events	경로 변경 시작, 완료, 에러 발생 시 이벤트 감지	경로 변경 중 로딩 상태를 표시하거나 다른 작업을 수행해야 할 때

 

추가 요약

• 페이지 이동 관련: router.push(), router.replace(), router.back()을 사용하여 페이지 전환 처리.

• 경로 정보 확인: router.pathname, router.asPath, router.query로 현재 경로 및 URL 정보를 가져와 조건 처리.

• 최적화: router.prefetch()로 자주 이동할 페이지를 사전 로드하여 성능 최적화.

• 라우팅 이벤트: router.events를 통해 경로 변경 이벤트 감지 및 로직 추가.

 

next/router? next/navigation?

지금까지는 next/router 라이브러리를 중심으로 설명하였지만, Next.js 13부터는 next/navigation이 도입되었습니다. next/navigation은 app 디렉토리와 함께 사용되며, 서버 컴포넌트와 클라이언트 컴포넌트의 분리를 지원하여 최신 Next.js 구조에 최적화된 라우팅 기능을 제공합니다.

https://medium.com/@console.log.vivek/userouter-import-from-next-navigation-or-next-router-in-app-router-next-js-b668098b6175

 

이 내용에 대해서는 추후 작성해보겠습니다. 오늘은 useRouter의 기능들이 무엇인지를 중점에 뒀습니다!

 

끝내는 말

오늘 Next.js에서 라우팅을 처리하는 방법과 useRouter의 다양한 기능에 대해 알아보았습니다!

평소 useRouter를 사용하면서, 이것저것 다양한 기능이 있어서 글로 남겨보고 싶었기에! 이렇게 작성하게 되었습니다. 제가 아마 곧 랜딩 페이지를 개발할 거 같은데, 거기서 router.prefetch 기능을 잘 사용해보려고 합니다! 

 

아무튼, Next.js의 라우팅 시스템은 개발자 친화적인 기능을 제공해서 잘만 사용한다면 효율적으로 애플리케이션을 개발하실 수 있을 거라고 생각합니다ㅎ.ㅎ

 

앗 그리고 Next.js 13+ 부터는 next/navigation을 많이 사용하게 됐는데, 다음에 next/router와 next/navigation에 대해서도 자세히 다뤄보겠습니다.

 

읽어주셔서 감사합니다 :)