[React] Link 컴포넌트 & useNavigate (+ a 태그)

🫡 시작하며 ...

리엑트 공부를 하던 중 페이지 이동을 도와주는 Link와 useNavigate를 알게되었는데, 둘의 차이를 명확히 모르겠고 html의 a 태그와는 무엇이 어떻게 다른지 궁금해서 정리해보게 되었다.

Link 컴포넌트

// 라이브러리 설치
npm install react-router-dom
// import
import { useNavigate } from 'react-router-dom';

// Router.j
function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;


// Login.js

import React from "react";
import { Link } from "react-router-dom";

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

• React-Router-Dom 에서 제공하는 컴포넌트
• Link 부분을 누르면 URL경로가 바뀌면서 해당 경로로 지정된 컴포넌트가 보여짐.
• 클릭하면 바로 이동하는 로직 구현할 때 사용 용이함.

useNavigate()

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

function Login() {
	const navigate = useNavigate();

  const goMain = () => {
    navigate("/main");
  };
  
return (
    <div>
      <button className="loginBtn" onClick={goMain}>
        login
      </button>
    </div>
  );
}

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환.
• 반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다.
• Link와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 위와 같이 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있습니다.

💡 차이점 종 정리!

<a> 태그

• <a href=#>는 전체 페이지를 재렌더링 시킴. (새로고침이 일어남)
• 브라우저 주소를 이동하고 페이지 자체를 새로고침. -> 상태 값이 유지X,속도 저하 😞
• 외부 프로젝트*로 이동하는 경우

Link 컴포넌트

• <Link />는 필요한 부분만 재렌더링하고 나머지 부분은 그대로 유지함.
• 데이터를 필요한 부분만 불러옴 -> 속도향상
• 프로젝트 내에서 페이지 전환하는 경우
• 클릭 시 바로 이동하는 로직 구현 시에 사용 용이
  ex) 상품 리스트 👉🏻 상세 페이지 이동

useNavigate()

*react-router 버전이 5에서 6으로 바뀌면서 UseHistory 가 UseNavigate로 바뀌었다. 기능은 거의 동일.

• 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용

ex)
로그인 버튼 클릭 👉🏻 회원가입이 되어 있지 않은 사용자 👉🏻 SignUp 페이지로 이동
로그인 버튼 클릭 👉🏻 회원가입이 되어 있는 사용자 👉🏻 Main 페이지로 이동