Link, Navigete, useNavigate의 차이점
최종 수정 : 2024-04-19
Link, Navigete, useNavigate의 차이점
Link 컴포넌트
<Link to="/주소"></Link>주소는 router를 통해 설정한 경로를 작성하면 되며, 사용자가 클릭해서 페이지를 이동할 수 있도록 만든다. 클릭만 하면 이동하기 때문에 다른 연산과정 없이 URL 경로가 바뀌면서 이동다. 개발자 도구에서는 <a href='주소'>로 보인다.
a태그와는 무슨 차이가 있는가?
<a href='주소'>를 사용할 경우에는 전체 페이지를 재렌더링 시키기 때문에 SPA에 맞지 않다. 브라우저 주소로 이동하고 페이지 자체를 새로고침 하는 것이다. 따라서 상태 값이 유지되지 못하므로 사용할 수 없으며 속도가 저하된다. 반면 <Link /> 컴포넌트는 SPA의 특성에 맞게 필요한 부분만 재렌더링된다. 필요한 부분에서만 데이터를 불러올 수 있기 때문에 속도 개선에 도움이 된다.
<a href="주소">는 외부와 연결할 떄 주로 사용하며, <Link /> 컴포넌트는 프로젝트 내에서 페이지 전환할 때 사용한다.
NavLink
Link에 추가 기능이 있다. 특정 링크에 스타일을 넣어준다. NavLink는 자체적으로 isActive라는 boolean 값을 가지고 있다. 클릭(활성화)시에 해당 요소의 클래스는 "active"로 변경된다.
Navigate
특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다. Link와 달리 어떤 조건을 만족해야 이동하도록 사용한다.
- 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
- 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우
- 잘못된 주소를 입력했을 경우, 404page로 이동
function PostPage() {
// ...
const post = getPost(postId);
// post가 없는 경우 /posts 페이지로 이동
if (!post) {
return <Navigate to="/posts" />;
}
// ...
}useNavigate Hooks
const navigate = useNavigate();
const goToLogin = () => {
navigate('/주소');
};웹 페이지 이동 시 추가적인 로직이 필요할 때 사용한다. 함수 호양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공한다. 즉, 특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용한다.
ex) 로그인 버튼 클릭 시
회원가입 되어 있는 사용자 -> Main Page로 이동
회원가입이 안 되어 있는 사용자 -> SignUp Page로 이동
- 쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우
- 쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우
- 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우
참고 자료
https://seo0yoon.tistory.com/69
https://www.codeit.kr/topics/building-a-website-with-react/lessons/5119