[TIL] history api push와 replace의 차이

history api

History API는 history 전역 객체를 통해 브라우저 세션 히스토리(웹 익스텐션 히스토리와 혼동해서는 안 됩니다.)에 대한 접근을 제공합니다. 사용자의 방문 기록을 앞뒤로 탐색하고, 방문 기록 스택의 내용을 조작할 수 있는 유용한 메서드와 속성을 노출합니다.
출처

이것은 history api를 정의하는 MDN에서 발췌한 정의 이다. 이 api는 back(), forward(), go()를 통해 페이지 이동을 할 수 있게 하는데 back은 뒤로가기, forward는 앞으로 go는 정수의 입력을 통해 이동할 수 있다. 여기서 우리가 볼 것은 History.pushState()와 History.replaceState()이다.

History.pushState()

주어진 데이터를 지정한 제목(제공한 경우 URL도)으로 세션 기록 스택에 넣습니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 title 매개변수를 무시합니다.

History.replaceState()

세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체합니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 title 매개변수를 무시합니다.

MDN에 따르면 이런데 아무튼 하고 싶은말은 replace를 사용하면 뒤로가기가 불가능하고 push를 사용하면 뒤로가기가 가능하다! 그 이유는 push state를 하면 히스토리 엔트리에 하나씩 url이 추가되어 앞으로 뒤로 페이지가 이동이 가능한데 replace는 새로운 엔트리를 추가하는 것이 아니라 변경하는 것이기 때문에 뒤로가기가 불가능하다!

react-router-dom useNavigate()

우리는 react-router-dom을 사용하여 페이지를 이동할 때 useNavigate()훅을 사용하여 이동한다. 여기서 useNavigate 또한 push와 replace를 사용하여 뒤로가기를 통제할 수 있다.

//App.jsx
import { useNavigate } from "react-router-dom";
import "./App.css";

function App() {
  const navigate = useNavigate();
  return (
    <div>
      <p>여긴 홈이에요</p>
      <button onClick={() => navigate("/about")}>이동!</button>
      <button onClick={() => navigate("/about", { replace: true })}>
        이동! 뒤로오지마!
      </button>
    </div>
  );
}

export default App;

//About.jsx
import { useNavigate } from "react-router-dom";

const About = () => {
  const navigate = useNavigate();
  return (
    <div>
      <p>여긴 어바웃이에요</p>
      <button onClick={() => navigate("/")}>홈으로!</button>
    </div>
  );
};

export default About;

useNavigate는 경로 뒤에 replace를 parameter로 줄 수 있다.

어우 화질왜이래
아무튼 버튼의 동작을 보면 replace를 사용하지 않은 navigating은 뒤로가기가 제대로 작동하지만 replace:true를 준 navigate버튼은 뒤로가기가 작동하지 않은 것을 확인할 수 있다.