Link 와 useNavigate의 차이점

리엑트에서는 두가지 방법을 통해서 새로운 페이지로 이동할수 있는데 방법은 아래와 같다.

1. Link
2. useNavigate

얼핏보면 둘다 결국은 다른페이지로 가기 위해서 주소값을 반환해주는 것이라고 생각할수 있지만, 큰 차이점이 존재한다.

바로 useNavigate는 함수라는것.

사용법에 앞서서 먼저 라이브러리를 설치해야한다

npm install react-router-dom --save

1. Link

   <Link to ='/home'>회원가입</Link> 
   

   이렇게 하게 되면 회원가입이라는 글에 링크가 걸리게 되고 누르게 되면 /home으로 이동하게 된다.html에서 a 태그와 거의 동일.
2. 해당 url을 통해서 이동하게된다.
3. 링크를 사용하기 위해서는 라우터 혹은 컴포넌트에서 바로 이동할수 있게 한다.
4. useNavigate

   function Login(){
   	const navigate = useNavigate();
   	
   	const goTo = ()=> {
   	if(student === 'charle')
   		navigate("/main");
   };
   
   	return(
   					 )
   
   }
   

   이런식으로 쓸수 있는데,는 고정으로 작성하고

   onClick = { navigate('/') }
   

   이런식으로 클릭을 햇을때? 홈으로가게 된다던지
5. 어떠한 이벤트나 조건을 만족시 해당 으로 이동할수 있도록 조절할수 있는 방법이다.
6. 이거를 onclick 으로 작성하게 되면
7. const navigate = useNaviagte();
8. useNavigate를 사용하기 위해서는 함수로 써야하기 때문에 useState와 거의 동일하게 작성하게 된다.

요약 :

어떠한 조건을 만족했을 때, 이동을 할수 있도록 하는것이 useNavigate이다.

그게 아니고 그냥 누르면 가게 하는거는 a 태그처럼 사용하는것, 그게 Link이다.