[React] Link, Navigate, useNavigate의 차이점?

 

link 태그 

   <Link to="/seo/main"></Link>

사용자가 클릭해서 페이지를 이동하도록 할 때 사용하고

하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등에 사용하면 되겠죠?

대부분의 경우 Link 만으로도 충분하다.

웹 앱을 만들고 싶을때, 웹 페이지 안에서 스무스하게 작동시키고 싶을때(클릭시 바로 이동해야 할 때)

ex)nav bar, aside menu등, 

 

 

Navigate 

특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다. 

(리다이렉트)

ex)

• 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
• 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

 

 

useNavigate 훅

  const navigate = useNavigate();
  const goToLogin = () => {
    navigate('/seo/main');
  };

useNavigate는 웹 페이지 이동 시 추가적인 로직이 필요한 경우에 사용한다.

즉, 특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용하면 된다.

ex) 로그인 버튼 클릭시, 회원가입 제출 버튼 클릭,

• 쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우
• 쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우
• 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우

 

 

둘 다 웹사이트 내에서 이동할때 사용하는데 이 둘의 차이점은 뭘까?

 

우선 제일 중요한건 어떠한 조건이 걸렸나, 걸리지않았냐가 

제일 중요하다!! 

예를 들어서 link(a태그)는 어떤 조건없이 그냥 누르면 

바로 넘어갈때 사용하고, 

useNavigate는

ex. ID - @ 포함 / PW - 5글자 이상/

이런식으로 어떤 조건이 포함되어있을때 사용한다.

그래서 회원가입 버튼은 어떠한 조건이 걸려있지않으니,

link태그지만 회원가입 폼을 작성한 후, 사용하는 

<제출하기, 완료> 버튼은 useNavigate 훅인 것이다.