개요
코딩을 하던 중 다른 친구가 window.location.href를 사용한 것을 보게 되었다. 나는 useNavigate를 자주 쓰는 편인데 "위 함수와 차이점이 뭐지?"라는 생각이 들어 정리해보았다. 이와 비슷한 link함수까지 정리해보고자 한다. 시작!
Link
Link는 react-router-dom을 설치하면 사용할 수 있는 컴포넌트이다.
Link 컴포넌트는 DOM에서 aㅌ그로 변환이 되기 때문에 지정한 경로로 바로 이동할 수 있다.
컴포넌트이기 때문에 조건에 따라 선택해 이동하기보다는 클릭 시 바로 이동하는 로직을 구현할 때 사용하는 것이 좋다.
useNavigate
useNavigate또한 react-router-dom 라이브러리를 설치하면 사용할 수 있으며 훅이다.
useNavigate를 실행 시 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 그렇기 때문에 보통 반환하는 함수를 'navigate'라는 변수에 저장하여 사용하는데, 변수에 함수를 할당한 것이기 때문에 navigate의 인자로 이동하고 싶은 path 값을 넘겨주면 원하는 경로로 이동할 수 있다.
또한 함수이므로 페이지 이동 시 처리해야하는 로직이 있는 경우 사용하면 좋다. 예를 들어 회원가입이 되어있는 경우, 회원가입이 되어있지 않은 경우에 따라 path를 다르게 주어 이동하는 경로를 다르게 설정해줄 수 있다.
window.location.href
자바스크립트에서 현재 페이지의 주소를 변경해 새로운 주소로 이동하는 가장 간단한 방법이다.
HTTP 요청을 새로 하기 때문에 브라우저 뒤로 가기를 클릭하면 페이지가 unload 되고 새로운 페이지를 불러온다.
새로운 페이지로 이동할 때 브라우저의 히스토리 스택에 새 항목이 추가되며 뒤로 가기 버튼으로 이전 페이지로 돌아갈 수 있다.
useNavigate vs window.location.href
둘의 차이점은 window의 history 스택에서부터 차이가 있다.
useNavigate
이것을 알기 위해서는 이전에 history.pushState에 대해서 알아야 한다.
react-router의 useNavigate는 history.pushState를 사용한다.
그러므로 useNavigate는 history 모듈에 의존성을 가지고 있고 이걸로 라우팅을 지원한다.
HTTP 요청을 새로 하지 않고 안의 내용만 바꾼다는 특징이 있다. 그러므로 뒤로 가기 버튼을 눌러도 페이지가 unload 되지 않고 안의 내용만 바뀐다.
브라우저의 히스토리 스택에 새 항목을 추가하지 않고 페이지 이동한다.
히스토리 스택에 직접적으로 추가하고 싶다면 useHistory 훅을 사용할 수 있다. 예시 코드는 다음과 같다.
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
// 히스토리 스택에 추가하고자 하는 경로로 이동
history.push('/your-path');
};
return (
<button onClick={handleClick}>Go to /your-path</button>
);
}이에 따른 window.location.href와의 차이점은 다음과 같다.
