React : 페이지를 이동하는 두가지 방법 (Link & useNavigate)

Link & useNavigate

페이지를 만들었으니 이제 그 페이지로 이동해 보아야 한다.

 

* Link, useNavigate 둘 다 react-router-dom 에서 import 해와야 한다. 

 

1) Link

<Link to =“/”> 홈 </Link>

<div>
     <Link to =‘/main’> 회원가입 </Link>
</div>

Link는 <a>.  a 태그처럼 쓰는 페이지 이동.

 

a태그

a 태그는 보통 외부사이트로 이동할 때 사용한다. 인스타그램이나 유튜브 링크처럼 외부로 이동할 때 쓰인다.

a 태그로 이동시 입력한 url 값에 대한 서버 요청이 실행된다. 그러면 서버에서 페이지 요소들을 받아온 뒤, 기존 페이지에서 다른 페이지로 새로고침이 되는 것.

 

Link

반면에 link 는 서버에 직접적인 요청 없다. 컴포넌트를 찾아서 보여주는 것 뿐이다. 즉 성능이 높아진다.

 

 

2) useNavigate

사용법 예시

const goToMain =() => {
navigate(“/main”)
);

return (
<div>
	<button onClick={goToMain}> button </button>
</div>
);

 

- 사용전에 변수를 만들어 넣어준다.

let navigate = useNavigate(); 

 

- 컴포넌트명이 아닌 경로명을 써야한다 ! 

navigate(‘/main') 사용.  <button onClick={() => {navigate(‘./data’)}}

 

* Tip navigate(1) 앞으로 한 페이지 이동

navigate(-1) 뒤로 한 페이지 이동

 

 

! 단순이동 - Link 

! 로직추가(onClick, onChange...) - useNavigate