[Next.js] Next.js 페이지 이동, 어떤 방법이 최선인가?

서론

최근 app 라우팅 기반에서 프로젝트를 진행하면서, 핸들러에 의해 페이지 이동을 구현해야 했었다.

 

페이지 간 이동은 사용자 경험에서 중요한 요소로, 어떤 방법을 선택하느냐에 따라 애플리케이션의 성능과 사용성이 크게 달라질 수 있기에 더욱 어떤 방법을 사용해야 하는지가 고민이었다.

• window.location.href 방식
• react-router-dom의 useNavigate 방식
• 그리고 새로 알게 된 useRotuer방식

 

이 글에서는 Next.js에서 제공하는 다양한 페이지 이동 방법을 살펴보려고 한다.

각 방법의 장단점을 비교하고, 결국에는 useRouter가 왜 가장 적합한 선택인지 살펴보자.

 

 

 

1. window.location.href

: window.location.href는 JavaScript의 기본 API로, 페이지를 완전히 새로 고쳐서 다른 URL로 이동한다.

 

1) 사용 예시:

const goToHome = () => {
    window.location.href = '/home'; // 홈 페이지로 이동
};

 

2) 장점:

• 사용법이 간단하다. 누구나 쉽게 이해할 수 있다.

3) 단점:

• 페이지가 새로 로드되므로 사용자가 이전 상태를 잃게 된다.
• 매번 서버에 요청을 보내기 때문에, 불필요한 데이터 전송이 발생한다.

 

 

 

2. useNavigate

: useNavigate는 React Router에서 제공하는 훅으로, SPA(Single Page Application)에서 페이지 간 이동을 도와준다.

 

1) 사용 예시:

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
    const navigate = useNavigate();

    const goToHome = () => {
        navigate('/home'); // 홈 페이지로 이동
    };
};

 

2) 장점:

• 페이지를 새로 고치지 않고 빠르게 이동할 수 있다.
• 현재 UI 상태를 유지하면서 부드러운 사용자 경험을 제공한다.

3) 단점:

• React Router에 의존하므로 Next.js의 기능을 제대로 활용하지 못한다.

 

 

 

3. useRouter

: useRouter는 Next.js의 강력한 라우팅 시스템을 활용하는 훅이다.

 

1) 사용 예시:

import { useRouter } from 'next/router';

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

    const goToHome = () => {
        router.push('/home'); // 홈 페이지로 이동
    };
};

 

2) 장점:

• 페이지 전환 시 전체 페이지를 새로 고치지 않으므로, 빠르고 부드러운 사용자 경험을 제공한다.
• 데이터 요청을 최적화하고 필요한 데이터만 가져올 수 있다.
• 브라우저 히스토리를 자동으로 관리해, 사용자가 이전 페이지로 쉽게 돌아갈 수 있다.
• URL의 쿼리 파라미터를 쉽게 처리할 수 있다.

 

 

 

비교 요약

방법	설명	페이지 새로고침	데이터 요청	브라우저 히스토리 관리
window.location.href	기본 JavaScript API	예	전체 페이지 요청	해당 없음
useNavigate	React Router에서 제공	아니요	상태 유지	해당 없음
useRouter	Next.js 내장 라우팅 시스템	아니요	최적화된 요청	자동 관리

 

 

 

 

결론

결론적으로, Next.js에서 페이지 이동을 처리할 때는 useRouter를 선택하는 것이 최고의 전략이다. 클라이언트 사이드 내비게이션을 통해 빠르고 부드러운 사용자 경험을 제공하고, 데이터 요청을 최적화하여 효율성을 극대화할 수 있다. 또한, 자동으로 관리되는 브라우저 히스토리는 사용자가 이전 페이지로 쉽게 돌아갈 수 있도록 도와준다.

 

이 모든 이점을 통해 개발자는 더 나은 사용자 경험을 창출할 수 있으며, 애플리케이션의 성능을 한층 끌어올릴 수 있다. Next.js를 사용하는 지금, useRouter를 통해 효율적인 페이지 이동을 구현하고, 사용자의 기대를 뛰어넘는 애플리케이션을 만들어 보자. 사용자에게는 매끄러운 탐색 경험을, 개발자에게는 더 나은 관리와 최적화를 제공할 것이다!