오늘 운영 이슈를 해결하다가 새롭게 배운 router event가 있어서 공유해봅니다.

Route 주소가 변경됐을 때 특정 액션을 발생시켜야 하는 경우 사용할 수 있는 router 이벤트

📍 routeChangeComplete

next/router로 이벤트를 감지해서 특정 이벤트가 발생하면 함수를 실행시킬 수 있다.
사용은 아래와 같이!

import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function useHandleOnload(handleOnLoad) {
    const router = useRouter()
    useEffect(() => {
        router.events.on('routeChangeComplete', handleOnLoad)
        return () => {
            router.events.off('routeChangeComplete', handleOnLoad)
        }
    }, [])
}

은근 운영이슈 해결할 때 자주 사용할 것 같아서 훅으로 만들어두었다. 잊혀지지 않고 널리널리 쓰이길 바라면서..!

Reference

• https://nextjs.org/docs/api-reference/next/router