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://velog.io/@ahn-sujin/React-Link-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-useNavigate%EC%9D%98-%EC%B0%A8%EC%9D%B4

https://www.codeit.kr/topics/building-a-website-with-react/lessons/5119