Next.js 13 navigation/useRouter는 어떻게 다를까?

Next.js 개발자라면 어플리케이션의 사용자 경험에 라우팅이 얼마나 중요한지 잘 알고 있을 것입니다. Next.js 13에서 useRouter 훅이 훨씬 간편해지고 많은 점이 변경되었습니다 ! 커피 한잔 손에 쥐고 편하게 읽어보세요. Next.js 13에서 무엇이 새로워졌고, Next.js 12와 어떻게 다른지에 대해 가벼우면서도 자세하게 썼으니까요. 😉

Next.js 12의 useRouter: 빠른 회고

기본 사항과 일반적인 메소드

Next.js 12에서 useRouter 훅은 프로그래밍 방식으로 라우트를 변경할 수 있게 해줬습니다. 다양한 유용한 메소드들이 있었습니다:

• router.push(): 새 페이지로 이동
• router.replace(): 히스토리에 추가하지 않고 이동
• router.back(): 이전 페이지로 이동
• ...등등.

제한 사항과 해결 방법

강력함에도 불구하고, Next.js 12 라우터는 일부 제한 사항이 있었습니다. 예를 들어, router.events를 사용하지 않고는 라우트 변경을 쉽게 감지할 수 없었습니다.

const router = useRouter();
useEffect(() => {
  const handleRouteChange = (url) => {
    // 로직 작성
  };
  router.events.on("routeChangeComplete", handleRouteChange);
  return () => {
    router.events.off("routeChangeComplete", handleRouteChange);
  };
}, []);

Next.js 13의 useRouter 사용

Next.js 13에서 useRouter 훅은 클라이언트 측 라우팅을 간편하게 만들어주는 다양한 메소드를 제공합니다. 이러한 메소드들은 웹 앱 내에서 페이지를 전환하거나, 데이터를 다시 불러오고, 브라우저의 히스토리를 조작할 수 있게 해줍니다.

Next.js 13 useRouter 메소드

router.push(href: string, { scroll: boolean })

이 메소드는 클라이언트 측에서 새로운 라우트로 이동을 합니다. 이 과정에서 브라우저의 히스토리 스택에 새로운 항목이 추가됩니다.

const router = useRouter();
// '/about' 페이지로 이동
router.push('/about');

router.replace(href: string, { scroll: boolean })

이 메소드는 router.push와 유사하지만, 브라우저의 히스토리 스택에 새로운 항목을 추가하지 않습니다.

const router = useRouter();
// '/about' 페이지로 이동하지만 히스토리에 추가되지 않음
router.replace('/about');

router.refresh()

현재 라우트를 새로 고침합니다. 이 메소드는 서버에 새로운 요청을 보내고, 데이터를 다시 가져오며, 서버 컴포넌트를 다시 렌더링합니다.

const router = useRouter();
// 현재 페이지 새로 고침
router.refresh();

router.prefetch(href: string)

특정 라우트를 사전 로딩하여 클라이언트 측에서 더 빠른 페이지 전환을 가능하게 합니다.

const router = useRouter();
// '/about' 페이지를 사전 로딩
router.prefetch('/about');

router.back()

브라우저의 히스토리 스택에서 이전 페이지로 돌아갑니다.

const router = useRouter();
// 이전 페이지로 이동
router.back();

router.forward()

브라우저의 히스토리 스택에서 다음 페이지로 이동합니다.

const router = useRouter();
// 다음 페이지로 이동
router.forward();

이 메소드들을 사용하면 Next.js에서 라우팅을 더 효율적이고 유연하게 관리할 수 있습니다. 이는 사용자 경험을 향상시키는 중요한 요소 중 하나입니다.

새로운 기능과 메소드

첫 번째로 주목할 점은 Next.js 13에서는 next/navigation에서 useRouter를 가져와야 한다는 것입니다. 이 버전에는 새로운 기능들이 추가되었습니다:

• router.refresh(): 현재 라우트를 새로 고침
• router.prefetch(href: string): 더 빠른 클라이언트 측 전환을 위한 사전 로딩
• usePathname과 useSearchParams: 경로 이름과 검색 파라미터를 얻기 위한 별도의 훅

성능 향상

router.prefetch() 메소드는 클라이언트 측 성능을 향상시키는 데 특히 유용합니다. 이는 연결된 페이지의 자산을 사전 로딩하여 페이지 로드 시간을 단축시킵니다.

Next.js 12와 13의 useRouter 주요 차이점

마이그레이션 경로

업그레이드를 계획하고 있다면 호환되지 않는 변경 사항을 알고 있어야 합니다:

• router.events가 대체되었습니다
• pathname과 query 문자열이 제거되었습니다
• 이제 next/navigation에서 가져와야 하며 next/router는 더 이상 사용되지 않습니다

호환되지 않는 변경 사항

주요한 변화 중 하나는 router.events의 대체입니다. Next.js 13에서는 usePathname과 useSearchParams 훅을 사용하여 페이지 변경을 감지할 수 있습니다.

실제 사례와 코드 스니펫

클라이언트 측 내비게이션

Next.js 13에서 클라이언트 측 내비게이션은 대체로 동일하지만, 새로운 기능들의 추가로 더 강력해졌습니다. 이제 router.refresh()를 사용하여 현재 페이지를 원활하게 새로 고침할 수 있습니다.

const router = useRouter();
// 현재 페이지 새로 고침
<button onClick={() => router.refresh()}>새로 고침</button>

새로운 scroll 원복 기능

Next.js 13에서는 페이지 네비게이션을 할 때 스크롤 위치를 원래대로 되돌리는 것이 기본 설정입니다. 그러나 필요에 따라 이러한 동작을 비활성화할 수 있습니다. 이를 위해서는 router.push()나 router.replace() 메소드에 scroll: false 옵션을 전달하면 됩니다.

예를 들어, 게시글 목록에서 특정 게시글을 읽다가 목록으로 돌아갈 때 동일한 스크롤 위치로 유지하고 싶다면 아래와 같이 코드를 작성할 수 있습니다.

import { useRouter } from 'next/navigation'

export default function PostPage() {
  const router = useRouter()

  return (
    <div>
      {/* 게시글 내용 */}
      <button
        type="button"
        onClick={() => router.push('/post-list', { scroll: false })}
      >
        게시글 목록으로 돌아가기
      </button>
    </div>
  )
}

이렇게 하면 /post-list 페이지로 돌아갈 때 스크롤 위치가 변경되지 않고, 사용자는 이전에 본 위치에서 계속 게시글 목록을 볼 수 있습니다.

이벤트 처리

Next.js 13에서는 라우터 이벤트를 듣는 것이 이전보다 더 간단해졌습니다. 이를 위해 새로운 훅 usePathname과 useSearchParams를 사용할 수 있습니다.

const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
  const url = `${pathname}?${searchParams}`;
  // 로직 작성
}, [pathname, searchParams]);

마치며

유익하셨나요? Next.js 13의 useRouter는 더 많은 기능, 더 나은 성능, 그리고 원활한 마이그레이션 방법을 제공합니다. 프론트엔드의 기술들은 항상 빠르게 변화하죠. 그만큼 편해지고 있다지만, 그만큼 배울게 많기도 합니다. 🥲

함께 읽으면 좋은 글

MVC, MVP, MVVM 패턴 차이: 개발자를 위한 아키텍처 패턴 이해하기

개발자라면 아키텍처 패턴에 대한 이해는 필수입니다. 특히, MVC, MVP, MVVM은 가장 널리 사용되는 디자인 패턴 중 하나로, 앱의 로직과 UI를 분리하며 유지보수를 쉽게 해줍니다. 이 글에서는 이 세 가지 아키텍처 패턴의 차이와 각각의 구조를 깊이 있게 살펴보겠습니다. 목차 1. MVC 패턴의 구조 flowchart TD User --> Controller Controller --> Model

DCIT 정보의 모든 것: 더티코더즈

2D와 3D를 웹에서 자유롭게 렌더링 할 수 있다면?: WebGL이란?

들어가며 웹 개발이라고 하면 HTML, CSS, JavaScript만 떠올리기 쉽습니다. 하지만 그 이상의 다이나믹한 시각적 표현이 가능합니다. 그 중 하나가 바로 WebGL입니다. 이 기술을 통해 웹에서 2D와 3D 그래픽을 자유자재로 다룰 수 있게 되었습니다. 이 글에서는 WebGL에 대한 모든 것을 알아보겠습니다. WebGL이란? WebGL은 Web Graphics Library의 약자로, 웹 브라우저에서 2D와 3D

DCIT 정보의 모든 것: 더티코더즈