router.push() state 초기화

같은 페이지로 이동할 때 state 초기화하기

아래와 같은 코드에서 '/one' 에서 '/two'로 이동할 때 state가 초기화되지 않는다.

import Link from 'next/link'
import { useState } from 'react'
import { useRouter } from 'next/router'

export default function Page(props) {
  const router = useRouter()
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>Page: {router.query.slug}</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase count</button>
      <Link href="/one">
        <a>one</a>
      </Link> <Link href="/two">
        <a>two</a>
      </Link>
    </div>
  )
}

초기화를 시켜주기 위해서는 아래와 같이 useEffect를 이용한다.

useEffect(() => {
  setCount(0)
}, [router.query.slug])

참고 NextJS 공식문서