[React] Link, useNavigete 차이 / 리액트 페이지 이동하기

Router.js 에서 설정한 path로 이동하는 방법

 

⭐️ Link 태그

html에서 a 태그와 같은 기능을 하는 태그입니다.

 

클릭했을 때 바로 이동하는 기능을 구현할 때 사용합니다. 

<Link to="/home"></Link>

 

 

⭐️ useNavigete

useNavigete를 사용하기 위해서는 react-router-dom 라이브러리가 설치되어 있어야 합니다.

라이브러리 설치 후 해당 라이브러리를 import 시켜준 후 사용합니다.

import { useNavigate } from "react-router-dom";

//예시입니다
const Mypage = () => {

	const navigate = useNavigate();
    
    return (
    	.
        .
        .
        .
        <button className="btn-home" onClick={() => navigate('/home')} />
    )
}

 

Link 태그와 다른점은 useNavigete 훅을 실행시키면 페이지 이동이 되는 함수를 반환해 주는 것입니다.

페이지 전환 시 추가로 처리해야 할 로직이 있다면 useNavigete를 사용합니다.