window.performance.getEntriesByType("navigation")[0].type의 'back_forward'값으로 뒤로가기 접근 감지로직을 만들었는데 해당 이벤트가 발생하지 않았다..
console.log를 찍어도 해당 인터페이스의 객체 자체가 찍히지 않는 것이었다.
페이지 이동 시에 문제가 있는 것 같아 이것저것 시도해보았다.
의심 1. 새로고침?
페이지 이동 시 새로고침이 안되어서 그런지 첫번째 의심을 해봤다.
useNavigation으로 이동을 하고 있었는데 새로고침을 해주기 위해 replace: true 옵션을 주었다.
새로고침은 되었으나 이것 역시 원인이 아니었다.
의심 2. 페이지 이동 자체의 문제
navigate의 문제가 있는게 아닐까 하여 location.replace()로 변경해주었다.
드디어 console.log에 객체가 떴다 !! 😊
그렇다면 useNavigate() / location.place()는 어떤 차이점이 있는걸까?
1. useNavigate()
React-Router v6에서 제공하는 navigate훅으로 React앱 내부의 navigate, 이동 히스토리를 관리할 수 있다.
따라서 useNavigate를 사용해 페이지를 이동하는 것은 React앱 내부에서의 이동일 뿐 실제 크롬, 사파리 브라우저의 히스토리에는 영향을 주지 않는다.
2. location.place()
location.place는 자바스크립트 내장 함수로 실제 브라우저의 navigate, 이동 히스토리를 관리할 수 있다. location.href와는 달리 페이지 이동 시에 새로고침까지 이루어지는 함수이다.
💡 useNavigation은 React Router를 통해 React내의 history를 조작하는 것 뿐 실제 브라우저의 history에는 관여하지 않아 window.performance이벤트가 발생하지 않았다 !!
