Next.js는 Client Side Rendering 방식을 사용해 효율적인 페이지 전환을 제공하며, 이를 위해 Link 컴포넌트와 프로그래매틱 페이지 이동(Programmatic Navigation) 방법을 제공한다. 이번 글에서는 Next.js에서 페이지 이동을 처리하는 두 가지 방법을 살펴보도록 하자.

---

1. Link 컴포넌트로 페이지 이동

1-1. HTML의 a 태그 문제점

HTML로 코드를 작성할 때는 페이지 이동을 위해 a 태그를 사용한다. 그런데 이 a태그는 Client Side Rendering(CSR) 방식으로 작동하지 않는다. 매번 서버에 새로운 페이지 요청을 보내기 때문에, 성능이 떨어질 수 있고 부드러운 사용자 경험을 제공하지 못한다.

1-2. Next.js의 Link 컴포넌트

Next.js는 이 문제를 해결하기 위해 Link 컴포넌트를 제공한다. Link 컴포넌트는 CSR 방식으로 페이지를 전환하여 더 빠르고 부드러운 사용자 경험을 제공함. 사용법도 간단하며, 기존의 a 태그와 비슷한 방식으로 사용할 수 있다.

1-3. Link 컴포넌트 사용법

import Link from "next/link";
import type {AppProps} from "next/app";

export default function App({component,pageProps}: AppProps) {
  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        <Link href={"/search"}>search</Link>
      </header>
      <Component {...pageProps} />
    </>
  );
}

• Link 컴포넌트를 사용하려면 next/link에서 Link를 import하여 사용하고, href 속성에 이동할 경로를 지정하면 된다.

• 위 코드에서 Link 컴포넌트는 a 태그와 비슷하게 동작하지만, CSR 방식으로 페이지를 전환한다. 즉, 페이지가 서버로부터 다시 로드되지 않고 클라이언트 측에서 전환되기 때문에 더 빠른 성능을 제공함.

---

2. Programmatic Navigation (프로그래매틱 페이지 이동)

Next.js에서는 링크 클릭 외에도, 특정 이벤트나 함수가 실행될 때 페이지를 이동시킬 수 있다. 이를 프로그래매틱 페이지 이동이라고 하며, 사용자가 직접 링크를 클릭하지 않아도 상황에 맞춰 코드에서 페이지 전환을 처리할 수 있다.

2-1. 프로그래매틱 페이지 이동이란?

프로그래매틱 페이지 이동은 사용자가 직접 링크를 클릭하지 않고, 특정 조건이 충족되었을 때 함수 내부에서 페이지를 이동시키는 방식이다. 예를 들어, 버튼 클릭, 폼 제출, 특정 데이터 조건 만족 시 페이지를 이동할 수 있다.

2-2. useRouter 훅으로 페이지 이동 처리

프로그래매틱 페이지 이동을 위해 useRouter 훅을 사용한다. 이 훅은 router 객체를 반환하며, 이 객체에는 페이지를 이동시킬 수 있는 다양한 메서드가 포함되어 있다. 가장 자주 사용하는 메서드는 push로, 특정 경로로 페이지를 이동시킨다.

2-3. 버튼 클릭 시 페이지 이동하기

버튼을 추가한 다음에 해당 버튼을 클릭했을 때 이벤트 핸들러 함수 안에서 페이지를 이동시키는 방식을 구현해 보자.

import Link from "next/link";
import type {AppProps} from "next/app";
import {useRouter} from "next/router";

export default function
const router = useRouter();
const onClickButton = () => {};

 App({component,pageProps}: AppProps) {
  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        <Link href={"/search"}>search</Link>
        <button onClick={onClickButton}>/test 페이지로 이동</button>
      </header>
      <Component {...pageProps} />
    </>
  );
}

• 이렇게 button을 추가하고 나면 이 버튼이 클릭됐을 때 동작할 이벤트 핸들러가 필요.

• onClickButton이라는 함수 생성. 그럼 이 /test 페이지로 이동을 클릭하면 이 onClickButton함수가 실행이 될테니까 이 함수 내부에 Client Side Rendering방식으로 페이지를 이동시킬 수 있는 로직을 만들어주면 돼

2-4. push 메서드

• useRouter훅을 사용. router객체 받아온 다음 onClickButton함수 내에서 router.push("/test") 이렇게 push메서드를 호출하고, 인수로는 문자열로 이동하고 싶은 경로인 /test를 명시해 주면 돼

• 이제 버튼을 클릭하면 onClickButton 함수가 실행되고, 이 함수 내부에서 router.push("/test") 메서드가 호출되어 CSR(Client Side Rendering) 방식으로 지정된 경로로 페이지가 전환된다. 이 방식을 통해 컴포넌트 내부에서 특정 조건이 만족되었을 때, 혹은 useEffect를 사용해 특정 상황이 발생했을 때, 코드 내부에서 프로그램적으로 페이지를 전환할 수 있다.
  즉, 링크 클릭 없이도 함수 내부에서 페이지 이동을 처리할 수 있는 유연한 방법을 제공해 준다.

2-5. 기타 메서드

router 객체에는 페이지를 이동시키는 메서드가 여러 가지 있다. 몇 가지 주요 메서드를 살펴보자면,

push(): 주어진 경로로 페이지를 전환.

replace(): push와 유사하지만, 이전 페이지 기록을 남기지 않는다. 뒤로가기를 방지하고 싶을 때 유용.

back(): 이전 페이지, 뒤로 이동시킨다.

---

❓ 개인적으로 헷갈리는 부분

"Link도 클릭하면 페이지가 이동하는데, 왜 버튼 클릭만 프로그래매틱 이동이라고 할까?"

Link 컴포넌트와 button을 사용한 페이지 이동은 둘 다 페이지를 이동시키는 방식이지만, 프로그래매틱 페이지 이동과의 차이는 페이지 이동이 어떻게 트리거되느냐에 있다.

Link 컴포넌트의 동작 방식

• Link 컴포넌트를 사용하면 사용자가 직접 링크를 클릭해서 페이지를 이동시킨다. 즉, 링크는 페이지 이동을 사용자의 명시적인 동작에 의해 트리거되는 방식. 이런 식으로, 링크는 페이지 내에서 사전에 정의된 경로로 이동할 때 주로 사용된다.

프로그래매틱 페이지 이동이란?

• 프로그래매틱 페이지 이동은 링크 클릭과 달리, 코드 내부에서 특정 조건이나 이벤트에 의해 페이지 이동이 발생하는 것을 말한다. 즉, 사용자가 직접 링크를 클릭하지 않고도, 페이지 이동이 프로그램의 로직에 따라 자동으로 실행될 수 있다.

예시로 살펴보자면,

• 버튼으로 페이지 이동은, 버튼을 클릭했을 때 특정 로직이 실행된 후 페이지가 이동할 수 있다.

• useEffect 훅에서 특정 데이터가 로드되면 자동으로 페이지가 전환될 수 있다.

• 폼이 제출된 후 자동으로 다른 페이지로 이동할 수 있다.

요약

• Link 컴포넌트: 사용자가 링크를 직접 클릭해서 페이지를 이동. 이 방식은 링크 클릭 외에 추가적인 논리가 필요하지 않은 경우에 적합함.

• Programmatic Navigation: 페이지 이동이 특정 로직이나 조건에 의해 발생. 링크 클릭 없이도 페이지가 전환될 수 있으며, 더 복잡한 로직에서 사용됨.

결론적으로, Link는 사용자가 페이지를 이동시키는 직접적인 동작이고, 프로그래매틱 페이지 이동은 코드 로직에 따라 자동으로 이동이 발생하는 방식이라는 점에서 차이가 있다.