Link와 navigate의 차이점은 무엇일까? (react-router-dom)

react-router-dom

React-router-dom은 react를 개발하신 분들은 다들 라우팅을 할 때 사용해보셨을 것입니다!
저는 다양한 기능은 사용해보지 못했지만, 매번 쓸 때마다 Link, navigate는 무조건 사용했기때문에 간단하게 정리를 하려고한다.

Navigate // Link 공식 사이트를 참고하였다.

Link 컴포넌트 속성

Link는 컴포넌트이다.
새로운 페이지로 이동하게 하는 기본적인 라우팅 도구
페이지 전환을 위한 URL을 to 속성에 넣어주면 된다.

예시

import { Link } from 'react-router-dom';
function 컴포넌트() {
  return (
    <div>
      <Link to="/가고싶은url">여기를 누르면 이동</Link>
    </div>
  );
}

이런식으로 하면 임시버튼을 클릭하면은 /가고싶은url로 이동을 할 수 있다.

Link 특징

간단하고 직관적
사실상 a href 태그의 react-router-dom 버전 (SEO 친화적 )

Link 컴포넌트는 사용자가 클릭했을 때 새로운 페이지로 이동하게 하는 기본적인 라우팅 도구입니다. 이 컴포넌트는 페이지 전환을 위한 URL을 to 속성으로 받아 사용합니다.

navigate 함수

navigate는 기본적으로 태그가 아니라 좀 더 유동적으로 라우팅을 구현할 수 있습니다.
특정 로직을 수행한 후 페이지를 전환하고 싶을 때 유용합니다.
ex. 버튼을 클릭했을 때, 특정 요소가 화면에 들어왔을 때 등.. 자유롭게 사용이 가능하다.

import { useNavigate } from 'react-router-dom';
function 컴포넌트() {
  const navigate = useNavigate(); //이런식으로 선언해준뒤 navigate로 사용한다.

  const handleButtonClick = () => {
    navigate('/이동하고싶은URL'); 
  };

  return (
    <div>
      <button onClick={handleButtonClick}>여기를 누르면 이동</button>
    </div>
  );
}

장점 및 특징

더 복잡한 라우팅 로직을 구현가능
조건에 따라 다른 경로로 이동하거나, 이전 경로로 돌아가는 등의 제어(navigate(-1))가 가능합니다.

정리 (개인적으로 느낀점)

1. Link는 코드의 가시성이 올라가고, SEO측면에서 좋다고한다.
2. 그 외의 용도는 전부 navigate를 사용해주는게 좋을 것 같다.