useNavigate와 window.location.replace의 차이

웹페이지에서 클릭이벤트가 일어났을 때 페이지를 이동하는 기능을 구현하던 중
useNavigate와 window.location.replace의 차이가 궁금해 알아보았다.

useNavigate

특징

• React 훅임.
• 사용자의 정보가 저장됨. 뒤로가기하면 이전 페이지로 이동.
• 스크롤를 페이지 맨 아래로 한 후 이동 시 이동한 페이지에서도 맨 아래에 위치해있다.

//사용법
import { useNavigate } from 'react-router-dom'; //useNavigate import

const navigate = useNavigate();
navigate('이동을 원하는 페이지');

window.location.replace();

특징

• 자바스크립트 메서드(함수).
• 웹브라우저의 히스토리 저장안됨.
• 뒤로가기로 이전 페이지로 가는 것을 차단하거나, 방문 히스토리를 남기지 않아야 하는 경우에 사용.
• 페이지(창)자체를 이동하는 것임.

//사용법
window.location.replace('이동을 원하는 페이지');

실제 사용했던 코드

나는 로그아웃 버튼을 클릭 시 메인페이지로 돌아오는 기능이 필요했다.
사용자의 정보가 저장되기보단 새로운 창이 로드되는 것이 더 알맞다고 생각해서
window.location.replace();를 사용했는데 어떤 것이 더 좋을지 더 공부해봐야겠다!

//LogoutModal.js
//관련코드만 간략하게 첨부했습니다.
const LogoutModal = () => {
  const handleLogout = () => {
    localStorage.removeItem('token');
    window.location.replace('/'); //메인페이지로 이동
  };

  return (
    <ModalContainer>
        <p>로그아웃 하시겠습니까?</p>
        <div className='logout-btn'>
          <button className='logout' onClick={handleLogout}>
            로그아웃   //로그아웃 버튼 클릭 시 handleLogout함수 실행
          </button>
        </div>
      </div>
    </ModalContainer>
  );
};