[새싹프론트엔드] useNavigate vs Link

useNavigate 와 Link

기업 연계형 프로젝트를 진행하다가
클릭시 페이지를 이동시켜야하는데 navigate와 Link가 떠올랐다
둘 다 같은 기능인데 어떤 차이가 있는지, 어떤 것을 사용해야 적절한지 궁금해졌다

useNavigate( )

useNavigate는 react-router-dom 에서 제공되는 기능으로 함수를 호출해 페이지를 이동한다
특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어준다

버튼 클릭 시, 만족하는 조건에 따라 다른 페이지로 이동 (조건을 충족해야함)

const navigate = useNavigate();
	
  const ChangePage = () => {
      if( person === 'student' ){
          navigate("/student-main");
      } else if ( person === "teacher" ){
          navigate("/teacher-main");
      }else{
     	navigate("/main");
      };

<Link>

Link는 react-router-dom 에서 제공되는 기능으로 DOM에서 a로 변환된다
a와 Link는 지정한 경로로 바로 이동시켜주기 때문에 클릭 시 특정 주소로 바로 이동하는 로직을 구현할 때 사용한다

<Link to="/main"> 페이지 이동 </Link>

+) Link와 a의 차이
a : 외부 프로젝트로 이동하는 경우
Link : 프로젝트 내에서 페이지 전환하는 경우

---

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 13주차 블로그 포스팅