[REACT]Link와 useNavigate의 차이

React Router 라이브러리에서 Link 컴포넌트와 useNavigate 훅은 라우팅을 다루는 데 사용됩니다.

프로젝트를 하던 중, Link 컴포넌트는 먹지 않고 useNavigate만 먹는 일이 발생했다.

작동되지 않는 코드

<Link to= "/questions">
  <Button onClick={handlePostBtn}>Post</Button>
</Link>

정상작동되는 코드

const navigate = useNavigate();

const handlePostBtn = e => {
              .
              .
              .
    navigate('/questions');
  };

return(
  <Button onClick={handlePostBtn}>Post</Button>
)

종종 onClick 속성이나 버튼 자체와 관련된 이슈 때문에 Link 컴포넌트가 작동하지 않을 수도 있다고 한다.

그럼 이 둘의 차이점은 뭘까?
찾아보니 이러한 차이점이 있었다.

Link 컴포넌트는 클릭 이벤트를 처리하여 다른 경로로 이동시킨다. 이 컴포넌트는 라우트 설정 파일에서 정의한 경로와 일치하는 URL로 이동하며, 애플리케이션 내부에서 페이지 이동을 처리하는 데 사용된다.

useNavigate 훅은 컴포넌트 내부에서 라우팅을 수행할 때 사용된다. 이 훅을 사용하면, 애플리케이션에서 프로그래밍 방식으로 페이지를 이동할 수 있다. 예를 들어, 로그인 후 사용자를 다른 경로로 이동시키거나, 폼 데이터를 제출하고 이동시킬 수 있습니다.

따라서, Link 컴포넌트는 일반적인 페이지 전환을 처리하는 데 사용되고, useNavigate 훅은 프로그래밍 방식으로 페이지 이동을 처리하는 데 사용된다.