라우터 객체의 push와 replace 의 차이를 아시나요?

라우터 객체의 push와 replace는 둘 다 브라우저의 주소를 변경하는 메소드입니다.

그러나 두 메소드 간에는 몇 가지 중요한 차이점이 있습니다 !

push : 새로운 주소를 푸시하여 브라우저 히스토리에 추가

push 메소드는 새로운 주소를 현재 브라우저 히스토리에 추가합니다.

사용자가 뒤로가기 버튼을 클릭하면 이전 주소로 돌아갈 수 있습니다.

예를 들어, push('/about')는 현재 주소를 '/about'으로 변경하고,
사용자의 브라우저 히스토리에 이동 내역을 추가합니다.

// push 메소드 예시
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  function goToAboutPage() {
    history.push('/about');
  }

  return (
    <button onClick={goToAboutPage}>Go to About Page</button>
  );
}

위의 예시에서 goToAboutPage 함수는 버튼 클릭 시 '/about' 주소로 이동하도록 설정합니다.

push 메소드를 사용하여 새로운 주소를 푸시하고, 브라우저 히스토리에 이동 내역이 추가됩니다.

사용자는 뒤로가기 버튼을 클릭하여 이전 페이지로 돌아갈 수 있습니다.

---

replace : 현재 주소를 교체하여 브라우저 히스토리를 변경하지 않음

replace 메소드는 현재 주소를 새로운 주소로 교체합니다.

사용자가 뒤로가기 버튼을 클릭하면 이전 주소로 돌아갈 수 없습니다.

예를 들어, replace('/contact')는 현재 주소를 '/contact'로 교체하고,
사용자의 브라우저 히스토리에는 이동 내역이 추가되지 않습니다.

일반적으로, push는 새로운 페이지로 이동하고,
브라우저 히스토리에 해당 이동 내역을 추가하려는 경우에 사용됩니다.

반면에 replace는 현재 페이지를 교체하고,
브라우저 히스토리를 변경하지 않으며, 사용자가 뒤로가기로 이전 페이지로 되돌아가지 않아야 하는 경우에 사용됩니다.

// replace 메소드 예시
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  function goToContactPage() {
    history.replace('/contact');
  }

  return (
    <button onClick={goToContactPage}>Go to Contact Page</button>
  );
}

위의 예시에서 goToContactPage 함수는 버튼 클릭 시 '/contact' 주소로 현재 주소를 교체합니다.

replace 메소드를 사용하여 현재 주소를 교체하고, 브라우저 히스토리에는 이동 내역이 추가되지 않습니다.

따라서 사용자는 뒤로가기 버튼을 클릭하여 이전 페이지로 돌아갈 수 없습니다.