이미 useNavigate으로 다 만들어버렸지만 Link와 useNavigate의 차이점이 궁금해서 시원하게 정리해보겠다 !

Link 컴포넌트

• React-Router-Dom이 제공하는 컴포넌트
• Link 컴포넌트를 누르면 URL경로가 바뀌면서 해당 경로로 지정된 컴포넌트가 보여진다.
• 페이지 이동할 때 쓰이고, 개발자 도구에는 <a>로 보인다.

  <Link /> 컴포넌트와 <a>의 차이점

  • <a>는 전체 페이지를 재렌더링 시킨다. 브라우저 주소를 이동하고 페이지를 새로고침한다.
  • <Link />는 필요한 부분만 재렌더링하고 나머지는 그대로 유지된다.
  • 사용하는 경우
    • <a>는 외부 프로젝트와 연결하는 경우
    • <Link />는 프로젝트 내에서 페이지 전환하는 경우

useNavigate

• 페이지 이동을 할 수 있게 해주는 함수를 반환한다. navigate라는 변수에 반환하는 함수를 저장하고, path값을 넘겨주면 해당 경로로 이동할 수 있다.
• 조건이 필요한 곳에서 navigate 함수를 호출해서 경로를 이동할 수 있다.

Link 컴포넌트와 useNavigate의 차이점

Link

• 클릭 시 바로 이동하는 로직 구현 시에 사용한다.

useNavigate

• 페이지 전환 시 추가로 처리해야하는 로직이 있거나, 조건에 따라 페이지를 이동해야 하는 경우에는 useNavigate을 사용한다.

정리

Link는 조건 없이 바로 페이지를 이동할 때 사용하고, useNavigate은 조건이 있는 이동을 할 때 사용한다!