2024.1.29 기록 (Link 컴포넌트와 useNavigate의 차이)

SPA를 구성하는 프로젝트를 진행하던 도중, 다중 페이지를 구현하고 싶어 방법을 찾았는데

 

hook으로는 useNavigate가 있었고, Link 컴포넌트가 있었다.

 

 

Link 

 

Link 컴포넌트는, HTML의 a태그와 역할이 비슷했는데, 차이점이 있다면 <a href = # ...> 로 사용되는 a태그는

페이지를 이동하고, 새로고침하는 것 까지가 하나의 과정인 반면에,

 

Link 컴포넌트는, 필요한 부분만 리렌더링을 거친다는 차이가 있었다.

역할이 다르다, MPA를 구현 할 때는 a href 를 사용하면 되는 법이다.

 

<Link to="/contact">contact 페이지로 이동하기</Link>

 

이렇게 이동하고자 하는 페이지의 링크를 입력해주면 된다. 그렇게 되면 다음과 같이 하이퍼링크처럼 표기가 된다.

 

 

useNavigate

 

useNavigate는 특정 조건에 맞을 때 페이지를 이동하는 경우에 사용한다.

그렇기 때문에 주로 이벤트 함수 내에서 사용한다. 

const navigate = useNavigate();
<button onClick={() => {
        navigate("/");
      }}>Home으로 이동

 

이벤트 핸들러 내부에 존재하기 때문에 여러가지 조건을 부여해줄 수 있다.

이것이 가장 큰 차이점이다.

 

만약 직관적으로 페이지의 이동만을 요구하는 작업이라면 Link를 사용하는 게 조금 더 좋은 방안이 될 수 있겠다.