07-23-2022 TIL // Link와 Navigate 차이?

리액트를 협업을 한창 하는 중에 페이지를 이동할 때 Link와 Navigate를 둘 다 사용되었는데 문득 둘의 차이점이 궁금했다. 둘 다 페이지를 이동할 때 쓰는 것인데 도대체 둘의 차이점은 뭘까??

0. Link

   Link는 클릭 시 바로 이동하는 로직 구현에 용이하다고 한다. 예를 들어 디테일 페이지로 이동하는 것들..
   react-router-dom 에서 제공되는 Link 는 DOM 에서 a 로 변환됨. a 와 Link 는 지정한 경로로 바로 이동시켜줌.
   a 와 Link 의 차이점은 a 는 외부 프로젝트로 이동할 경우 Link 는 프로젝트 내에서 페이지를 전환할 경우

<Link to="/page"></Link>

1. Navigate

   함수 호출을 통해 페이지 이동을 한다. 페이지를 이동한다는 것에 공통점이 있지만 차이점도 존재한다.
   Navigate는 보통 페이지 전환 시 추가로 처리해야하는 로직이 있을 때 사용한다.
   예를 들어 로그인 버튼 클릭 시 백엔드와 통신을하고 Case 별로 나눈 후 다른 페이지를 보여주면 된다.

const navigate = useNavigate();

const onClick = () => {
	navigate("/main")
}