Next.js 라우팅: Link 컴포넌트(next/link) vs useRouter 훅 (next/navigation)

next/lint(Link 컴포넌트)

• next/link는 선언적인 방식으로 클라이언트 측 라우팅을 구현하는 데 사용되는 React 컴포넌트
• HTML의 a 태그와 유사하지만 페이지 전체 다시 로드하지 않고 클라이언트 측에서 부드럽게 페이지 전환
• 특징
  • 선언적 : JSX내에 <Link href=’/경로’>…</Link> 형태로 사용
  • 클라이언트 측 네비게이셔니 페이지 전환 시 전체 페이지 리로드가 발생하지 않아 UX향상
  • 프리페칭 : 뷰포트에 들어오거나(기본 동작) 마우스 오버 시 자동으로 해당 페이지의 데이터를 미리 가져와 다음 페이지 로딩 속도를 향상시킴
  • SEO 친화적: 내부적으로 <a>태그를 렌더링하므로 검색 엔진 크롤러가 링크 쉽게 인식
• 장점
  • 쉬운 사용: React 컴포넌트 형태로 직관적 사용
  • 성능 최적화: 프리페칭 기능 덕분에 빠른 페이지 전환
  • 향상된 사용자 경험: SPA와 같은 부드러운 페이지 전환 제공
  • 접근성: 기본적인 <a>태그 역할하므로 웹 접근성 측면 유리
• 단점
  • 제한적인 제어: 프로그래매틱한 라우팅(ex-조건부 리디렉션, 폼 제출 후 이동)에는 부적합. 이러한 경우 next/router를 사용
  • 동적인 경로에 대한 추가 설정: 동적인 경로[id] 사용할 경우 as prop을 통해 실제 URL 지정해줘야함

next/router(userRouter 훅 / Router 객체)

• 프로그래매틱 방식으로 라우팅 제어할 수 있는 기능 제공
• useRouter 훅 사용해 현재 라우트 정보에 접근, router.push(), router.replace()등을 통해 명시적으로 페이지 이동을 트리거할 때 사용
• 특징
  명령적/프로그래매틱: JS코드를 통해 라우팅 로직 직접 제어
  라우트 정보 접근:router.query, router.pathname 등을 통해 현재 라우트의 파라미터나 경로에 접근할 수 있음
  미들웨어, 인증/권한 관리: 특정 조건에 따라 페이지 접근 제헌 및 리디렉션하는 로직 구현 시 유용
  
• 장점
  유연성: 특정 이벤트(버튼 클릭, 폼 제출, API 응답 등)에 따라 동적 페이지 이동시키거나 리디렉션할 수 있음
  조건부 라우팅: 사용자 역할, 로그인 상태 등에 따라 다른 페이지 이동시켜야할 때 필수적
  라우트 정보 접근: 현재 라우트의 상태(쿼리 파라미터, 동적 경로 세그먼트 등)를 활용하여 로직을 구현할 수 있음
  
• 단점
  Link 컴포넌트보다 복잡: 단순 링크 클릭하여 이동하는 경우 Link 컴포넌트보다 코드 길어질 수 있음
  수동적 프리페칭:Link 컴포넌트처럼 기본적으로 프리페칭을 제공하지 않으므로, 필요한 경우 router.prefetch()를 명시적으로 호출
  

프로젝트에 적용 판단 근거

• next/link가 더 적합한 경우
  대부분 정적 네이게이션 링크: 헤더, 푸터, 사이드바 등 명확하게 정의된 메뉴 항목을 클릭하여 페이지 이동하는 경우
  블로그 게시물, 제품 목록 등: 목록에서 특정 항목 클릭하여 상세 페이지 이동하는 경우
  성능과 사용자 경험 중요: 프리페칭 통해 빠른 로딩 제공하고 싶은 경우
  SEO최적화: 검색 엔진이 웹사이트 구조를 쉽게 파악해야 하는 경우

• next/navigation가 더 적합한 경우

  • 폼 제출 후 리디렉션: 사용자 등록, 로그인, 게시물 작성 등 폼 제출 후 특정 페이지로 이동해야 하는 경우
  • 조건부 라우팅: 사용자 로그인 상태에 따라 /login 페이지로 리디렉션하거나, 관리자만 접근할 수 있는 페이지로의 접근 제한하는 경우
  • API호출 후 페이지 이동: 데이터 저장 또는 업데이트 후 성공 페이지로 이동하는 경우
  • URL 쿼리 파라미터를 동적으로 변경: 필터링, 정렬 등의 기능을 구현할 때 URL 쿼리 파라미터를 변경하여 페이지를 리로드하지 않고 데이터 업데이트하는 경우
  • 클라이언트 측에서 동적 경로 생성: 검색 결과에 따라 특정 경로를 생성하고 이동해야 하는 경우

일반적 권장 사항

• 기본적 next/link 사용, 대부분 UI 상 네비게이션은 next/link로 충분 + 성능이점

• 프로그래매틱한 제어 필요할 때만 next/router 사용. 특정 로직이나 사용자 상호작용에 따라 페이지 이동이 필요한 경우에 한하여 next/router 활용하는 것이 좋음

• 프로그래매틱(Programmatic)이란? - 코드를 이용해 자동 제어하는 방식
  어떤 작업을 코드(프로그램)을 통해 자동화하거나, 특정 로직에 따라 제어하는 방식
  수동으로 하나하나 설정,클릭하는 대신, 미리 작성된 규칙과 알고리즘에 따라 시스템이 자동으로 판단하고 실행

• 예시

  • 수동/선언적 방식(next/link): 웹 페이지에서 사용자가 직접 링크(<a>)를 클릭해서 페이지 이동하는 것처럼, <Link href=’/about’>About Us</Link>와 같이 미리 이동할 경로를 선언해 놓는 것
  • 개발자가 직접 코드로 이동해라 명령할 필요 없음
  • 프로그래매틱 방식(next/router): 특정 버튼 클릭 시, 폼 제출이 성공했을 때, 사용자 로그인 상태에 따라 다른 페이지로 자동으로 이동시켜야 할 때 사용.
  • ex) router.push(’/dashboard’)라는 코드 작성 시, 이 코드가 실행될 때 프로그램이 /dashboard 경로로 이동하라는 명령 수행. 즉, 이 조건일 땐 이리로 이동해 라고 프로그램이 직접 제어

• 특징
  자동화: 사람 개입 없이 코드가 작업 수행
  규칙 기반: 미리 정의된 로직이나 조건에 따라 동작
  유연성: 다양한 시나리오와 복잡한 요구사항에 맞춰 동작 변경 및 확장
  효율성: 반복적이거나 대규모 작업 빠르고 정확하게 처리