[React] Link 컴포넌트와 useNavigate의 차이

sujin·2022년 9월 11일

React

목록 보기

6/17

router를 공부할 때 페이지 이동하는 컴포넌트로 Link를 알게 되었는데 이후에 hook공부를 할 때 useNavigate 로도 페이지 이동이 가능하다는 것을 알게 되어 둘의 차이점이 무엇인지 궁금해서 이번에 정리해보려고 한다!

Link 컴포넌트

// 설치
npm install react-router-dom

React-Router-Dom 이 제공하는 컴포넌트이다.
Link 컴포넌트로 만든 부분을 누르면 URL경로가 바뀌면서 해당 경로로 지정된 컴포넌트가 보여진다.
클릭만 하면 이동하기 때문에 다른 연산과정 없이 페이지를 이동할 때 쓰인다.
개발자 도구에는 <a href=#> 로 보인다.

// Router.js
function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <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;

💡그렇다면, Link 컴포넌트와 <a>의 차이점은?

<a href=#>는 전체 페이지를 재렌더링 시킨다. 브라우저 주소를 이동하고 페이지 자체를 새로고침한다. 따라서 상태 값이 유지되지 못하고 속도도 저하된다.

<Link />는 SPA의 특징에 맞게 필요한 부분만 재렌더링하고 나머지 부분은 그대로 유지된다. 데이터를 필요한 부분만 불러올 수 있기 때문에 속도향상에 도움이된다.

쓰임의 차이

<a href=#> 는 외부 프로젝트와 연결 할 때 주로 사용한다.

<Link />는 프로젝트 내에서 페이지 전환하는 경우 사용한다.

useNavigate hook

// 설치
npm install react-router-dom

useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.
- 반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다.
조건이 필요한 곳에서 navigate 함수를 호출해서 경로를 이동할 수 있다.
ex) 로그인 페이지에서 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭했을 때 다른 페이지로 이동할 때

💡useNavigate를 직접 호출하지 않고 변수로 선언해서 반환된 함수를 호출하는 이유는?
  import { useNavigate } from "react-router-dom";
  const Login = () => {
	const navigate = useNavigate();
	return(
      <div className="login">	
		<input placeholder="전화번호, 사용자 이름 또는 이메일"/>
        <input placeholder="비밀번호/>
        <button onClick={() => {navigate("/main");}}>로그인</button>                   
      </div>
	)
  }
hook의 규칙

컴포넌트 최상단에서만 호출해야한다.

다른 조건문, 함수선언문, 반복문 등 중첩된 함수 안에서는 호출 할 수 없다.

컴포넌트 내부 함수에서 callback으로도 호출 할 수 없다.

함수 컴포넌트에서 호출할 수 있다. (Custom hook에서 예외처리 가능)

Link 컴포넌트와 useNavigate hook의 차이

1. Link

클릭 시 바로 이동하는 로직 구현 시에 사용
ex) 상품 리스트에서 상세 페이지 이동 시

2. useNavigate

페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
ex) 로그인 버튼 클릭 시
회원가입 되어 있는 사용자 -> Main 페이지로 이동
회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동

✨ 마무리

MPA에서 작업 할 때는 항상 링크이동이나 페이지 이동에서 a태그만 사용했는데 a태그는 전체 페이지를 재렌더링 시키기 때문에 SPA에서는 적합하지 않았다. 그래서 리액트에서는 주로 Link 또는 useNavigate 훅을 사용하는데 처음에도 이 둘의 차이를 정확히 알지 못해서 어떤 상황에서 어떤 것을 써야할지 몰랐었는데 Link는 조건 없이 바로 이동할 때, useNavigate는 조건 있는(?) 이동을 할 때 사용하면 된다고 알고 있으면 될 것 같다!!