Next.js Hook 사용법: usePathName, useRouter, useSearchParams

강 진성·2024년 6월 21일

목록 보기

3/8

Next.js 에서는 클라이언트 사이드 네비게이션을 쉽게 처리할 수 있도록 다양한 훅을 제공한다. 이 글에서는 usePathname , useRouter , useSearchParams 의 사용법과 예제를 소개한다.

usePathName

usePathName 훅은 현재 URL의 경로(pathname)를 반환한다. 쿼리 파라미터를 포함하지 않고 오직 경로만 나타내기 때문에 URL의 구조를 확인할 때 유용하다.

// app/navigationTest/page.jsx

'use client';
import { usePathName } from "next/navigation";

const Navigation = () => {
  const pathname = usePathName();
  
  console.log(pathname); // 현재 경로 출력
  
  return (
    <div>
      localhost:3000/navigationTest
    </div>
  )
}

export default Navigation;

콘솔창 결과
/navigationTest

위 예제에서 usePathName 을 사용하여 현재 경로를 가져와 콘솔에 출력한다.

useRouter

useRouter 훅은 라우터 인스턴스를 반환하여 네비게이션을 프로그래밍 방식으로 제어할 수 있다. 페이지 이동, 페이지 새로고침, 뒤로가기, 앞으로가기 등의 작업을 수행할 수 있다.

'use client';
import { useRouter } from "next/navigation";

const Navigation = () => {
  const router = useRouter();
  
  const handleClick = () => {
    console.log("clicked");
    router.push('/'); // 지정된 URL로 이동
    // router.replace('/'); // 히스토리를 남기지 않고 이동
    // router.refresh(); // 현재 페이지 새로고침
    // router.back(); // 이전 페이지로 이동
    // router.forward(); // 다음 페이지로 이동
  }
  
  return (
    <div>
      <button onClick={handleClick}>Write and Redirect</button>
    </div>
  )
}

export default Navigation;

이 예제에서는 버튼 클릭 시 router.push('/') 를 호출하여 루트 페이지로 이동한다.
useRouter 훅을 사용하여 다양한 네비게이션 동작을 제어할 수 있다.

useSearchParams

useSearchParams 훅은 URL의 쿼리 파라미터를 읽고 설정하는 데 사용된다. 쿼리 파라미터를 가져오거나 변경할 때 유용하다.

'use client';
import { useSearchParams } from "next/navigation";

const Navigation = () => {
  const searchParams = useSearchParams();
  
  const q = searchParams.get("q");
  console.log(q); // 'q' 파라미터 값 출력
  
  return (
    <div>
      localhost:3000/navigationTest
    </div>
  )
}

export default Navigation;

localhost:3000/navigationTest?q=test URL에서 q 파라미터의 값을 가져와 콘솔에 출력한다.

test

[ 쿼리 파라미터 설정 예시 ]

set 메서드를 사용하여 쿼리 파라미터를 설정하는 방법도 살펴보겠다.

'use client';
import { useSearchParams } from "next/navigation";

const Navigation = () => {
  const searchParams = useSearchParams();
  
  const q = searchParams.get('q');
  console.log(q); // 현재 'q' 파라미터 값 출력
  
  const handleClick = () => {
    const newSearchParams = new URLSearchParams(searchParams.toString());
    newSearchParams.set('q', 'hello'); // 'q' 파라미터를 'hello'로 설정
    
    router.push(`?${newSearchParams.toString()}`);
  }
  
  return (
    <div>
      <button onClick={handleClick}>
        Write and Redirect
      </button>
    </div>
  )
}

export default Navigation;