개발자

react-router-dom v6에서 useNavigate의 replace:true속성과 window.location.replace()의 차이점

2023년 10월 04일조회 425

window.performance.getEntriesByType("navigation")[0]의 type이 back_forward인 경우에 뒤로가기로 진입했다는걸 파악하고 있었는데 페이지 이동시에 useNavigate의 replace:true 속성일 때는 해당 옵션이 안나오고 location.replace로 이동시에만 해당 옵션값으로 판별이 가능한데 두개 차이점이 존재하는걸까요,,?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

인기 답변

거니님의 프로필 사진

react-router-dom의 useNavigate와 웹 API의 window.location.replace()는 서로 다른 방법으로 페이지 내비게이션을 처리합니다. useNavigate는 애플리케이션 내에서 라우팅을 조정합니다. replace: true 옵션을 사용하면, 현재의 페이지 이력을 다음 페이지로 교체합니다. 즉, 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 돌아가지 않습니다. 이 방식은 SPA (Single Page Application) 내부에서 라우팅 변경을 합니다. 실제 페이지 리로드나 외부 네비게이션 이력이 발생하지 않습니다. window.location.replace() 메소드는 웹 API의 일부입니다. 이 메소드를 사용하면, 현재 페이지를 새 URL로 교체하고 이전 페이지를 내비게이션 이력에서 제거합니다. 이 방식은 실제로 페이지를 리로드하고, 외부 네비게이션 이력을 변경합니다. window.performance.getEntriesByType("navigation")[0].type에 대한 참조는 브라우저의 내비게이션 성능 타이밍에 관한 정보를 제공합니다. back_forward 값은 사용자가 '뒤로 가기' 또는 '앞으로 가기' 버튼을 사용하여 페이지를 로드했음을 나타냅니다. useNavigate의 replace: true를 사용하여 페이지 이동을 할 경우, 실제로 브라우저의 내비게이션 이력이 변경되지 않기 때문에 window.performance.getEntriesByType("navigation")[0].type 값에 영향을 주지 않습니다. 반면, window.location.replace()를 사용하면 내비게이션 이력이 실제로 변경되므로 해당 값에 영향을 줄 수 있습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 10월 04일

네, `window.location.replace()`와 react-router-dom의 `useNavigate`에서 replace를 사용하는 것은 둘 다 현재의 history 상태를 새로운 상태로 교체하는 방식이지만, 속성과 동작 방식에 약간의 차이가 있습니다. 1. `window.location.replace()`: 이 함수는 자바스크립트 내장 함수로서 그 이름에서 알 수 있듯이 현재의 URL을 완전히 새로운 URL로 교체합니다. 이는 페이지를 네비게이트하면서 앞 뒤로 이동(Back/Forward navigation)할 때 웹 브라우저의 히스토리 스택에 변경사항을 남기지 않습니다. 따라서 개발자는 이 기능으로 인해 사용자가 페이지를 새로 고침하거나 다른 페이지로 이동했다가 돌아올 때 초기 화면으로 되돌아오게 할 수 있습니다. 2. `useNavigate().replace=true`: 반면에 React Router v6 에서 제공하는 useNavigate hook은 앱 내부에서 페이지 간의 네비게이션을 지원합니다. replace 옵션을 true로 설정하면, 리액트 라우터 history 스택에서 현재 위치를 교체하지만, 실제 브라우저 history 스택에는 변경사항을 반영하지 않습니다. 다시 말해, useNavigate hook은 리액트 어플리케이션의 상태를 관리하는 것으로, 브라우저의 실제 history와는 다르게 동작합니다. 따라서 `window.performance.getEntriesByType("navigation")[0].type` 값이 "back_forward"로 표시되는 것은 사용자가 브라우저의 뒤로가기 버튼을 클릭해서 직접 Back/Forward navigation을 수행했을 때, 즉 `window.location.replace()`를 사용했을 때만 발생하는 현상입니다. 결국 두 방법 모두 비슷한 기능을 수행하지만 내부적으로 어떤 부분이 작동하느냐에 따라 결과적으로 체감되는 차이가 존재하는 것입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!