[Next.js] router.push와 router.replace 차이점

🐥 router.push와 router.replace 차이점

안녕하세요. 오늘은 router.push와 router.replace의 차이점에 대해서 알아보겠습니다.

next.js에서는 페이지를 전환하기 위한 방법은 아래와 같습니다.

 

1. Link 사용
2. useRouter 사용

저희가 이번에 알아볼 것은 useRouter에서의 push와 replace입니다.

---

1. router.push

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/about')}> // push 사용
      Click me
    </button>
  )
}

push를 사용할 경우에는 이동할 페이지를 새로 추가하는 방식으로 페이지 전환이 됩니다.

따라서 아래와 같이 브라우저 히스토리에 이동한 페이지가 쌓이게 됩니다.

 

2. router.replace

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/about')}> // replace 사용
      Click me
    </button>
  )
}

replace를 사용할 경우에는 원래 있던 페이지를 이동할 페이지로 바꾸는 방식으로 페이지 전환이 됩니다.

따라서 브라우저 히스토리에서 기존 히스토리만 바뀌기 때문에 이동한 페이지가 쌓이지 않습니다. 

---

위와 같은 차이로 인해 push를 사용하느냐 replace를 사용하느냐에 따라 동작에 차이가 있겠죠?

push를 하면 back을 이용해서 뒤로가기를 할 때 이전 페이지로 다시 돌아갈 수 있습니다.

하지만 replace를 하면 back을 이용해서 뒤로가기를 하면 이전 페이지로 돌아갈 수 없습니다.

 

push와 replace의 차이를 잘 알고 페이지에 적용한다면 더 깔끔한 페이지 동작을 만드실 수 있습니다^^!