url 경로가 바뀔 때마다 useEffect 실행하는 방법 - usePathname(), useSearchParams() 사용하기

next.js 13버전 부터는 url 이동을 감지하기 위해서 usePathname()와 useSearchParams()  훅스를 사용하면 된다.

 

usePathname은 현재 url 경로를 반환하고

useSearchParams 현재 url의 쿼리를 반환한다.

 

따라서 url의 경로가 바뀔 때만 고려하면 된다면 usePathname만

쿼리를 포함하고 있을 경우엔  useSearchParams도 같이 사용하면 된다.

 

사용하는 방법

import { usePathname, useSearchParams } from "next/navigation";

const pathname = usePathname();
const searchParams = useSearchParams();

useEffect(() => {
  //실행하고 싶은 로직 실행
 }, [pathname, searchParams]);

 

참고

https://velog.io/@changwook/nextjs-13-route-change