a태그와 react-router의 Link태크

리액트 환경에서 개발을 진행하면서
페이지 이동을 할 때 Link 태그를 주로 사용하고 있는데,
문득 html a태그와 근본적으로 어떤 차이가 있는지 궁금해져 찾아보다가 기록을 남긴다.

결론을 먼저 말하면, a태그는 페이지를 이동시키면서 새로고침을 해 페이지를 아예 새로 불러오고,
Link태그는 브라우저의 주소만 바꿀 뿐 새로고침을 하지 않는다.

페이지를 새로고침을 한다는 것은 현재 렌더링되어있는 컴포넌트를 지우고(상태들도 초기화되고) 아예 새로 렌더링된다는 말과 같다. 따라서 리액트에서 a태그를 직접적으로 사용하는 것은 SPA방식과 어울리지 않는다.

👀 그럼 navigate 함수는?
함수 안에서 특정 조건을 충족할 시에 경로를 이동할 때 사용한다.
Link태그와 마찬가지로 주소만 바뀔 뿐 새로고침 되지 않는다.

import {useNavigate} = "react-router-dom"
const navigate = useNavigate()

if(....){
   navigate("/signin")
   }