[Next.js 13] Route 변경 감지

헤더의 네비게이션바에서 Link를 통해 페이지를 이동하게 되면 활성화 되었던 메뉴가 비활성화(화면 밖으로 이동)되게 만들어야했다.
기존엔 next/router의 useRouter를 통해 router.events.on 의 방식으로 개발했던 기억이 있는데

NextRouter was not mounted 라는 에러가 났다.

문서를 찾아보니 13버전 이후로는 next/navigation을 통해 useRouter 훅이 제공되고
기존의 방법이 아닌 usePathname, useSearchParams 훅을 이용해 URL 변경을 감지할 수 있다고 설명되어있다

Next.js doc (route-change)

'use client'
 
import { usePathname, useSearchParams } from 'next/navigation'
 
function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Do something here...
  }, [pathname, searchParams])
}

위와 같은 방법을 사용하라고 안내되어있는데
간단하게는 useEffect의 source props가 변경될때 감지하는 기능을 이용하면 되는것이다.