Next.js 에서 router를 이용하여 페이지를 이동하는 방법은 두가지가 있다.
router.push('/')router.replace('/')
이 코드들은 모두 주소가 '/' 인 페이지로 이동시킬 것이다. 둘의 차이점은 무엇일까?
브라우저 History의 동작
브라우저는 이동할 때마다 스택에 주소를 저장한다.
내가 구글에서 next.js router에 대한 검색을 해서 이 게시물에 들어왔다고 가정하자.
www.google.com/
→ www.google.com/search?q=next.js+router
→ velog.io/@2hanbyeol1
다음과 같이 주소가 이동했을 것이고 그렇다면 브라우저는 이를 Back History라는 뒤로가기 스택에 저장했을 것이다.
그리고 뒤로가기를 누르면 스택의 최상단에 있는 velog.io가 pop되고 Foward History에 push 된다.
그래서 push랑 replace 차이가 뭔데
router.push를 사용하면, 새로운 URL이 Back History에 push된다.router.replace를 사용하면, Back History의 내용이 전부 지워지고 새로운 URL로 대체된다.
→ 따라서 뒤로가기를 사용할 수 없다!!
그럼 replace는 어디서 사용하나!
로그아웃을 했을 때 메인페이지로 이동하는 경우와 같이 뒤로가기를 사용할 필요가 없는 경우에 router.replace를 사용할 수 있다.
글 잘 쓰고 싶어요